GSAP HIGHLIGHT TEXT ON SCROLL

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!

Alternatively

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>

Other Articles

How To Make A Vertical 3D Gallery Slider

https://youtu.be/BWoXciYFn-Q So if you follow along in the video, I refer to this blog post for you to enter code ...

How To Make A Horizontal 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A Auto Rotating 3D Carousel

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A 3D Carousel For Products

So if you follow along in the video, I refer to this blog post for you to enter code at ...