davyd

Thank you a lot!

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

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.

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? https://codepen.io/Davyd-Shamiiev/pen/VwRQpjG

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?

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. https://codepen.io/Davyd-Shamiiev/pen/mdoXVRg