ScrollTrigger and long Timelines

[Joseph Levin]

I am rather confused about how to synchronize GSAP timelines and ScrollTrigger.

 

If we define the height of the vertical scrolltrigger endpoints, say, to the central 500px of the viewport, and we attach a long duration timeline to that scrolltrigger definition (while animating multiple elements at different points of time within the overall timeline duration of 6 seconds), it seems likely that the timeline animation as a whole would not necessarily finish by the time the user would scroll past the ending point of the scrolltrigger.

 

Is there a way to define a timeline so that it finishes at the exact point the user scrolls to or beyond that vertical endpoint?  Kind of like a proportional overall duration for that timeline?

 

Thank you for your help!

 

 

[GreenSock]

If I understand your question correctly, that's exactly what scrub: true does. It links the progress() of the timeline to the ScrollTrigger's progress. So it doesn't really matter how long your timeline is - it'll be forced to fit between the start and end scroll positions perfectly. See what I mean? 

 

Or did I misunderstand your question? 

[Joseph Levin]

You understood me perfectly.

 

Thank you very much for helping me out, and so quickly. I appreciate it. 

 

I

See the Pen WNrGrYW by jlevin (@jlevin) on CodePen

and found that I could construct a timeline with multiple elements animating one after the other that would get triggered at the specified trigger point. When I set the scrub to "true", no matter the duration of the entire timeline it proportionately animated the timeline within the trigger endpoints.

 

If I had a timeline with elA animating for 400 seconds, followed by elB animating for 200 seconds, the animation for elA would occur in first 2/3rd of the total vertical distance between trigger points, and elB in the next (or last) 1/3rd of that vertical distance, the speed of which was controlled by how fast I scrolled. (Total duration of my timeline equals 600s, so 400/600=2/3rd, 200/600=1/3rd). If I changed the individual element animation durations to 4 and 2, respectively, the proportions end up being the same.

 

If I removed the scrub: true, then the animation would just play for it's entire duration once the first trigger point was reached.

 

I had some difficulty with getting the syntax correct as the

See the Pen RwPXQOQ by GreenSock (@GreenSock) on CodePen

didn't quite have the example setup as I was hoping.

 

For example, I tried to just continue the code block from the Simple Demo:

 

// Or you can attach a tween or timeline to a ScrollTrigger later
const anim = gsap.to(".c", {
  x: 400,
  rotation: 360,
  duration: 3
});

 

with:

 

// Or you can attach a tween or timeline to a ScrollTrigger later
const anim = gsap.to(".c", {
  x: 400,
  rotation: 360,
  duration: 3
})
.to(".b", {
  x: 400,
  rotation: 360,
  duration: 3
})
;

after removing conflicting scrolltrigger related code, and it simply didn't work.

 

My goal is to be able to setup a more elaborate timeline for a project I'm working on, and I think I can do that now.

 

Thank you once again for your help! Y'all rock over here.

 

 

 

 

 

 

 

[GreenSock]

Looks like you just forgot to create a timeline. You were trying to chain a to() call on a simple tween, but you can't do that. You need a timeline. Think of a timeline like a container for tweens (and/or other timelines). 

 

// BAD
gsap.to(...).to(...);

// GOOD:
gsap.timeline().to(...).to(...);

Does that clear things up? 

[Joseph Levin]

Absolutely!

 

Thank you for your help!

[Mustafeez]

On 6/15/2020 at 10:41 PM, GreenSock said:

Looks like you just forgot to create a timeline. You were trying to chain a to() call on a simple tween, but you can't do that. You need a timeline. Think of a timeline like a container for tweens (and/or other timelines). 

 

// BAD
gsap.to(...).to(...);

// GOOD:
gsap.timeline().to(...).to(...);

Does that clear things up? 

Hi,

Can we control timelined animation with scroll trigger? Like animations in timeline starts right after the first ones get completed Automatically, what If we start the 2nd animation of timelined element with scroll instead of start auto right after first ones get completed?

[ZachSaucier]

24 minutes ago, Mustafeez said:

Can we control timelined animation with scroll trigger? Like animations in timeline starts right after the first ones get completed Automatically, what If we start the 2nd animation of timelined element with scroll instead of start auto right after first ones get completed?

It's not clear what you're asking. Please go through the ScrollTrigger docs (including the video) and the most common ScrollTrigger mistakes. If you still have a question, please create a new thread with a minimal demo of your situation that clearly shows the issue.