Combine ScrollTrigger

[Robbor]

hi guys,
I'm currently googleing for solutions to the following problem: I have a section that should expand to 100% width when its top touches the top of the screen. Works alone. The second function is vertical sliding, also with a scroll trigger as a pinned element. Works alone too. I just can't get it combined. 

If that doesn't go beyond the scope of this forum, please take a look at it. Thank you for your time and best regards

 

Rob

 

See the Pen qBzVRrK by robbor (@robbor) on CodePen.

[mvaneijgen]

I'm not sure why it doesn't work. That is really weird, but it is best to never animate properties like width, height, top, left, right, bottom. If you can, always use the transform propeties, like scale, x, y. These are much beter for performance and don't cause browser repaints, which can really bog down browsers.

 

I swapped out your width tween for a .from() scaleX: 0.95 which works perfectly and has great browser performance. In this case you can also use a clip-path which would be more inline with the width animation. 

 

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

 

Side note: I have to say your setup seems really complicated for changing slides. Right now you create a ScrollTrigger for each section, but no section can ever play at the same time, it is always if one slide moves away the next one comes in, that sounds to me like a timeline. Personally I would create this using one timeline and one ScrollTrigger and put all the animations on that one timeline. I've created a post all about this, the effect is different, but the logic is the same. Your setup isn't wrong, so if you like just keep it, but I wanted to show a different way of thinking about it, which is in my opinion much simpler and easier to manage. Hope it helps and happy tweening! 

 

 

[Robbor]

Thank you mvaneijgen. 

I have an infinite number of slides, they are posts. hence the complicated setup. hope that makes sense

I'll take a look at your demos in detail now.

 

Have a good day

[Rodrigo]

Why not a Clip Path animation instead?

See the Pen jOjaLKx by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Robbor]

 

Rodrigo and mvaneijgen thanks to both of you. You have often helped me here and have made learning much easier for me. Thank you very much 😃