ScrollTrigger multiple timeline on absolute sections

[inzn]

Minimal Demo here: https://stackblitz.com/edit/stackblitz-starters-bg5bww?file=pages%2Findex.js

 

I have so far manage to make most of what I want work – though undoubtedly not very efficiently.
My goal is do to the following: 
1. The indicators should start from width: 0 and go to width: '100%' for each section separately. (Works)
2. The divs should fade it or show up once I have scrolled far enough. Currently they fade in because I don't know how to set them straight to opacity: 1. Div1 is visible from the start, Div2 after scrolling 100vh, Div3 after 200vh and so on. (Works)
3. After I have scrolled through all of these sections (300vh), the container should scale down to 0.95 and also get a border-radius. (Doesn’t work)

 

I'm having a bit of trouble with this, since the sections are absolute positioned and I don't really know how Scrolltrigger works with scrolling values. So all the code I already have is pretty much from reading these forums.

 

Maybe somebody can help me out – thanks in advance already!

[mvaneijgen]

I've found that you hardly need more than one ScrollTrigger to get the desired effect, so what I've did is remove all your timelines with their own ScrollTriggers and just used one timeline with one ScrollTrigger to control everything.

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So below a fork of your demo with ScrollTrigger disabled (for now) then you can see the timeline will just play. If the animation is correct then you can enable ScrollTrigger to see how it works on scroll. A timeline is literately what it is, everything put on there will be played in sequence and thus the first indicator will grow. then a .set() animation will play (.set() is a zero duration tween which will just instantly do what you tell it) and because we are in a loop the second one will play, ect. Then outside the loop we do your final tween scaling everything down. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-e57skv?file=pages%2Findex.js

 

Some side notes:

1. using .from() tweens instead of .to() are sometimes easier. Eg width: 100%; is the default, so if you do .from(width: "0%") you don't have to set the initial state in CSS.

• Instead of animating width try animating scale, it is much more performant 
• Here are some tips on fixing FOUC 

 

 

 

[inzn]

@mvaneijgen super helpful as always! tysm!