How to combine GreenSock's (GSAP) ScrollTrigger and TextPlugin

Question

How can I combine ScrollTrigger with their different plugins, e.g. TextPlugin? Like tweening

<h2 id="tweenthat">That</h2>

to

<h2 id="tweenthat">This</h2>

when #tweenthat comes into view.

Answer 1

A ScrollTrigger can be added to any tween or timeline (in addition to being created in a standalone way). So just create the animation that you want then attach it to a ScrollTrigger. For example: https://codepen.io/GreenSock/pen/LYZrjqJ

gsap.to("#myText", {
  duration: 2, 
  text: "thank you for waiting", 
  delay: 1,
  scrollTrigger: {
    trigger: "#myText"
  }
});