What are the right gsap tools to replicate this scroll effect?

[stratboy]

Hi, I'd like to replicate the parallax effects you can see here:

https://wylervetta.com/pages/storia

 

In fact, my issue is not the parallax fx itself, since I would like to build it with css scroll-driven animations. The real problem for me is to manage sections pinning until their inner 'photo stories' are fully scrolled. I managed to do something similar here:

codepen.com/editor/stratboy/pen/019ce1d2-7cc0-73ca-a845-8aa1f22c8acd

 

It kind of works, but not so precise, especially in mobile devices. I would then need some js solution to manage sections pinning. And I don't really want the 'snap'  feel, just "smooth" pinning, like you can see on wylervetta.com. Is it a use case of some of the gsap scroll libraries? Thank you, regards

 

See the Pen 019ce1d2-7cc0-73ca-a845-8aa1f22c8acd by editor (@editor) on CodePen.

Edited March 12 by stratboy
link fixes

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

You're on the GSAP forum, so your going to get GSAP solutions, so if your looking for 'css scroll-driven animations' this would be a bad place to ask. Seen you're going to load GSAP already of the other part why not just use all the tools. We've seen so many stories where people did it without GSAP and then their client said can we do X which then required to rewrite everything in GSAP any way. 

 

Personally I don't see anyway to do this with ScrollTrigger pinning and css scroll-driven animations that is why I would suggest just leveraging GSAP for everything. My advise would be to build all the animations at first and then hooking that to ScrollTrigger. I've written a whole post about this and this would be the logic I would advise you to use:

 

Hope it helps and happy tweening! 

[stratboy]

Well, thank you, yes, I could also use gsap for everything, that's not a real issue for me, it's ok to use js all the way if needed.
But the main question is: is gsap any suitable for pinning the sections the way they do in wylervetta? I took a look to all your examples, but basically they are focused on stacking sections, rather then pinning them on scroll and keeping them pinned only while their content is being scrolled. Also, the page content will be a thing determined by the editors, and there will be 'normal' sections mixed with 'pinned' ones, in no particular or predictable order. So we are not speaking of a whole page animation here. 

[mvaneijgen]

47 minutes ago, stratboy said:

is gsap any suitable for pinning the sections the way they do in wylervetta?

Yes!

 

48 minutes ago, stratboy said:

I took a look to all your examples, but basically they are focused on stacking sections, rather then pinning them on scroll and keeping them pinned only while their content is being scrolled.

 

50 minutes ago, stratboy said:

Also, the page content will be a thing determined by the editors, and there will be 'normal' sections mixed with 'pinned' ones, in no particular or predictable order. So we are not speaking of a whole page animation here. 

That is no issue, that will just you creating the ScrollTrigger pin sections in order they appear on the page or using https://gsap.com/docs/v3/Plugins/ScrollTrigger/#refreshPriority 

 

My advise just build out your Codepen with a basic layout and build your animation, reject the urge to scroll anything and just build the animation, when you get stuck just post back here with what you've tried and anyone will be happy to help you build this out further. Your current demo does not use any GSAP but we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

[Rodrigo]

You can use the same approach we use in this demo:

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

 

Is mostly about using the correct start and points in order to ensure that the content in the specific column is completely scrolled into view before unpinning the element/column that you want to pin.

 

Hopefully this helps

Happy Tweening!