How to make a two-step scroll trigger, and run animations at the same time?

[davyd]

Hello! ✨
 

I would like to create the following animation:

1. Pin the second screen (.pinned) when its top reaches the top of the viewport.
2. The process bar and logo should appear simultaneously when they reach 10% of the viewport (smth like it looks now)
3. As they reach the top of the screen, they should continue to animate until reaching the right side of the screen, and the mask should start to open at one line with bar & logo group.

Currently, the animation is not synchronous and does not progress smoothly in one line, but it should. Also it is behave weirdously on rewind. 

See the Pen mdoXVRg by Davyd-Shamiiev (@Davyd-Shamiiev) on CodePen

[mvaneijgen]

Hi @davyd welcome to the forum!

 

How I like to think of ScrollTrigger that it is just playing an animation like a video. Then it turns the browsers scrollbar into the progress bar of that video! So 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!

 

I've restructured your code and created a timeline. On that timeline I've put all the animations you want to happen. Timelines are the core of GSAP and will do as the name implies put all the animations one after the other, but it is more powerful than that! Using the position parameter you can have tweens start at the same time as other tweens. So using this technique you can just create the video you want to happen on scroll. 

 

As stated above I've removed ScrollTrigger just to get a feel for what you want the animation to do, if this is correct you can turn on ScrollTrigger to see how it would feel on scroll. Hope it helps and happy tweening! 

 

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

 

[davyd]

Wow! @mvaneijgen Thank you a lot. This is super cool! 
I will try it!  
One little specification.
in a case if I want  to trigger an apeareance of elements ('.bar', '.logo') when '.pinned' reaches 'top 10%' i need second scrollTrigger? 
Or I can handle it with one? 

[mvaneijgen]

3 minutes ago, davyd said:

in a case if I want  to trigger an apeareance of elements ('.bar', '.logo') when '.pinned' reaches 'top 10%' i need second scrollTrigger? 

You could do that indeed. 

 

4 minutes ago, davyd said:

Or I can handle it with one? 

You can handle it with one. The only thing you need to do is do some math. Normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

That is why I've add an empty tween to your timeline of 0.5 (tl.add(() => {}, "+=0.5")) and if you're not set of making it exactly 10% and just change that number to what feels right you can do this all with one ScrollTrigger, which is in my option the easiest.

[davyd]

Maybe it is real to continue this topic little bit? 
I have a question. So I want my elements(rectangles) that signed 1, 2. to get their full size till process bar (".bar") at the top of screen gets dotted line.  Is it real?

See the Pen VwRQpjG by Davyd-Shamiiev (@Davyd-Shamiiev) on CodePen

[mvaneijgen]

I'm not completely sure what your question is. But in your pen you're using the position parameter to have some tweens start at the same time. If you remove those, those tweens will start when the previous tween has finished. 

 

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

 

You're using the word "real" I think you mean "possible".

 

[davyd]

Yes I meant "possible". 

I want to animate 2 rectangles (big_rect, small_rect). I want them to change width from 0 to their full width while ".bar" & " .logo" are going from left of the ".mask" to the dotted line. So this rectangles will finish their animation faster then another elements. But still i wanna to control them by scroll. 

[davyd]

This rectangles should start at the same time with another elements but finish first (earlier).

[mvaneijgen]

You can change their duration to something smaller then the tweens with other durations.

 

If you have more questions that is all fine, but try forking some code here and modifying it your self, that is the best way to learn! And when it is not working just post back here with the link to the Codepen what you've tried, that way we can see your thought process and thus better help you understand the tools.

 

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

[davyd]

Thank you a lot!