Animating objects in and out with ScrollTrigger

[Raz Pulurian]

Hey there. Loving the work you all do! First time poster here.

I want to animate an element in and out with scroll triggers. For example:

• A site with 5 sections
• From the start of section 2 to the end of section 2, I want the element to increase in size
• From the start of section 4 to the end of section 4, I want the element to decrease in size
• I want the animation to be a bit smooth, so I'm using a scrub value of 2

 

I've attached a minimal codepen demo with what I have so far.

When I scroll slowly, everything works brilliantly in both directions. When I scroll down fast, it also works brilliantly. But if I'm at the bottom of section 5 and I scroll up fast, the element size pops. Ideally, I would like the fast scroll up to behave like the fast scroll down.

I've tried using preventOverlaps: true on my scroll triggers, but that creates a different sort of pop. I believe this is because it forces the previous timeline to its end position when the new timeline starts.

I also read the most common scroll trigger mistakes, but I didn't find anything there that helps in my case.

Worth noting that my actual project uses timelines with multiple tweens to control Three.js objects, but I'm able to reproduce the issue with the minimal demo attached.

As it seems to work when I'm fast scrolling down, I'm sure I'm missing something basic to make it work in the opposite direction. Any tips?

See the Pen ExdMyLe by studio-raz (@studio-raz) on CodePen

[mvaneijgen]

Hi @Raz Pulurian welcome to the forum!

 

Why not create one ScrollTrigger that tweens the whole animation over the whole ScrollTrigger. Having two timelines control the same element is always tricky, so if you can prevent it that will make it much easier. 

 

It's a bit tricky to wrap your head around, but normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance.

 

So right now there are four sections each 900px, over which the animation gets played and there are two tweens (each 0.5s each), so each tween gets played over 1800px of the scroll. If you have more complex animations it requires some calculations to have things play at exact points, but if you work with logical tween durations, it will be easy to line it up as you want. 

 

I think the following will also be helpful if you want to go my route: you can also build in pauses in the timeline by adding the following line to the timeline tl.add(() => {}, "+=1") this will to nothing for 1 second. If you would put this in the middle of the timeline of the pen below it would look like to following 900px scale animation up,  1800px do nothing,  900px scale animation down. 

 

Here is a fork of your pen with the endTrigger set to the bottom of  ".section-4". Hope it helps and happy tweening! 

 

See the Pen MWPxbow?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Raz Pulurian]

Funny, I was wondering if it was possible to use a single timeline! I did read ScrollTrigger documentation, but it wasn't immediately obvious to me that the combination of endTrigger with two tweens could be used for this. Good to know!

Could you walk me through how the current solution works? What I think I know:

• trigger: ".section-2", tells the animation where to start
• endTrigger: ".section-4", tells the animation where to end
• start: "top", tells the animation to start at the top of the trigger
• end: "bottom", tells the animation to end at the bottom of the endTrigger

 

I'm uncertain about how it manages the multiple tweens between the trigger and endTrigger

• t1.to(".target", {scale: 4});
• t1.to(".target", {scale: 1});

 

It looks like it's trying to fit both animations within the space available between the trigger and endTrigger, but I'm not sure exactly how it divides the space.

 

From the ScrollTrigger documentation (quote below), I've gathered that it uses the duration of each tween to decide how to distribute the animation. If two tweens have the same duration, then I'd expect them both to take 50% of the available space between the triggers, but that doesn't seem to be the case in your pen (the first tween is taking much more space).
 

Quote

How does duration work with scrub: true?
If you have a ScrollTrigger scrub: true and that ScrollTrigger has a timeline or tween animation associated with it, the durations of tweens within that animation serve as proportions for the total amount of distance that the tween will play. The proportion of how much distance it’s animated between is in regards to the total duration of the animation. 

I made another fork and spammed it with additional tweens. What's strange is that the last tween ends in section 5, even when scrolling slowly. Given my (likely incorrect) assumptions of how the ScrollTrigger works, I would expect the last animation to end at the bottom of the endTrigger.

See the Pen abRMBgV by studio-raz (@studio-raz) on CodePen

Would love to know how this works in more detail! Any takers?

[mvaneijgen]

1 hour ago, Raz Pulurian said:

It looks like it's trying to fit both animations within the space available between the trigger and endTrigger, but I'm not sure exactly how it divides the space.

 

From the ScrollTrigger documentation (quote below), I've gathered that it uses the duration of each tween to decide how to distribute the animation. If two tweens have the same duration, then I'd expect them both to take 50% of the available space between the triggers, but that doesn't seem to be the case in your pen (the first tween is taking much more space).

 

It should do it, but you have a scrub of 2 which means it lags behind for 2 seconds, if you would set it to true it will be more accurate. Also tweens have a few defaults, I already told you their duration 0.5s, but it also has an ease: "power 1.out", when working with ScrollTrigger scrub having a ease: "none" can feel smoother. 

 

1 hour ago, Raz Pulurian said:

I made another fork and spammed it with additional tweens. What's strange is that the last tween ends in section 5, even when scrolling slowly. Given my (likely incorrect) assumptions of how the ScrollTrigger works, I would expect the last animation to end at the bottom of the endTrigger.

 

This one I don't understand. I've add some more logic to your start and end values, the second part has to do with the viewport triggers, so I've set it to start: "top top", which means start when the top of the element hits the top of the viewport and end: "bottom bottom", which means stop when the bottom of the trigger element hits the bottom of the viewport. The default of these are both on the top of the viewport as seen in your pen both labels are on top of the screen overlapping each other, on my screen the end trigger would never touch the top of the screen, because there wasn't enough room to scroll further. 

 

See the Pen PoyLppm?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Also you've now set position fixed via CSS, but you could also set this via ScrollTrigger, which allows you to pin and element over the scroll duration (this will require a rewrite of your CSS logic), but check the pen below. The shoe is not pinned when scrolling down, but when you scroll further ScrollTrigger will start and it will pin the shoe, then the ScrollTrigger will finish and the shoe gets unpinned. You can set pin: true in ScrollTrigger to pin the trigger element, but your can also pin and element pin: ".myElement".  Check out the ScrollTrigger demos on https://greensock.com/st-demos/ for more awesome examples. 

 

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