Link to Tween in Timeline

[vanchris]

I have a small question about linking in GSAP ScrollTrigger.

 

 

Is it possible to link via a link <a> to a specific ".to" in a timeline?

 

A timeline with ScrollTrigger and scrub: true.

 

 

      gsap.timeline({
        scrollTrigger: {
          scrub: true
           ...
          }
      })
      .to("myelement",
      {
        ...
      })
      .to("myelement",
      {
      ...
      })




<a href=".to1">To Tween 1 and start animation with scrub from this point on</a>

<a href=".to2">To Tween 2 and start animation with scrub from this point on</a>

[ZachSaucier]

Hey vanchris. You will need to calculate this position yourself. You can do so by using the start position of your ScrollTrigger, the total distance of your ScrollTrigger, and the starting point of the target tween in reference to the timeline's total duration. In pseudo-code:

scrollTo: STStart + STScrollHeight * (targetTween.startTime() / tl.duration())

We show how to do something similar in this thread and the threads linked therein: