So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!
You can download the complete template here
The Following code goes into the HTML widget:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const split = new SplitType(".mygsaptrigger h2", {
types: "words, chars",
});
const tl = gsap
.timeline({
scrollTrigger: {
trigger: ".highlightcontainer",
start: "top 38%",
end: "+=50%",
scrub: 0.5,
},
})
.set(
split.chars,
{
duration: 0.3,
color: "white",
stagger: 0.1,
},
0.1
);
</script>