Panel stack, first one in place then animation on scroll and snaping

[not6248]

I have section 3 section
sections 1 and 3 are other contents.
By section 2 there will be various steps. Follow the example in codepen.
There will be a panel with various steps.
The first step will stay in place and the other steps will keep stacking up.
and must snap each panel
Now I have used a general css position sticky to do this.
And I'm still very new to Gsap.
I've been searching for a way to do this for more than 3-4 days and I'm starting to get discouraged.

 

Thank you.

See the Pen MWxPgQw by not6248 (@not6248) on CodePen

[mvaneijgen]

Hi @not6248 welcome to the forum!

 

There is no GSAP code in your demo, we love to see what you've tried already, that way we can see your thought process and thus better help you understand the tools! 

 

Also if you want to get the most out of these forums... Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/, also keep in mind 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 also written a guide how you can go about creating a card stacking effect, this will also work for panels! But as stated before you first have to create the animation before you think about ScrollTrigger also when working with ScrollTrigger it is beter to leave all the pinning and sticky-ing to it, instead of setting it via CSS.

 

We would love to see what you've tried and hope with this info you can find your solution, just post back here with a minimal demo that does have some GSAP in it and tackle one question at the time! Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

On top of the great advice by @mvaneijgen maybe these demos can provide a good starting point:

See the Pen abQNBVv by GreenSock (@GreenSock) on CodePen

 

See the Pen XWOJGVV by GreenSock (@GreenSock) on CodePen

 

See the Pen VwGyzge by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps,

Happy Tweening!

[not6248]

6 hours ago, Rodrigo said:

See the Pen abQNBVv by GreenSock (@GreenSock) on CodePen

This codepen works like I want.
how can I pin each section one at a time? (snap)

I think it might be ScrollTrigger.observe() right? I'm not sure.

See the Pen dyaKBeq by ahmed-attia (@ahmed-attia) on CodePen

[not6248]

6 hours ago, mvaneijgen said:

Hi @not6248 welcome to the forum!

 

There is no GSAP code in your demo, we love to see what you've tried already, that way we can see your thought process and thus better help you understand the tools! 

 

Also if you want to get the most out of these forums... Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/, also keep in mind 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 also written a guide how you can go about creating a card stacking effect, this will also work for panels! But as stated before you first have to create the animation before you think about ScrollTrigger also when working with ScrollTrigger it is beter to leave all the pinning and sticky-ing to it, instead of setting it via CSS.

 

We would love to see what you've tried and hope with this info you can find your solution, just post back here with a minimal demo that does have some GSAP in it and tackle one question at the time! Hope it helps and happy tweening! 

 

Thank you for your advice.
I will improve the way I speak and ask.

[mvaneijgen]

4 hours ago, not6248 said:

how can I pin each section one at a time? (snap)

To  me they are pinning and snapping, maybe we use the words pinning and snapping differently? Can you explain what you want things to do and what they are doing now?

 

4 hours ago, not6248 said:

I think it might be ScrollTrigger.observe() right? I'm not sure.

This uses the observer plugin to watch for scroll events and then do something. 

 

When posting a pen, be sure to fork it (the button in the lower right corner) to make it your own and show us what tweaks you've already made.

[not6248]

3 hours ago, mvaneijgen said:

To  me they are pinning and snapping, maybe we use the words pinning and snapping differently? Can you explain what you want things to do and what they are doing now?

 

This uses the observer plugin to watch for scroll events and then do something. 

 

When posting a pen, be sure to fork it (the button in the lower right corner) to make it your own and show us what tweaks you've already made.

I'm sorry I may have used some incorrect words.

At the moment I have the fork out but haven't made any special changes.

See the Pen WNmawWe by not6248 (@not6248) on CodePen

 

What I want is a panel stack (in the codepen it will be written SECTION. From now on I will use the word SECTION).
with behavior similar to css scroll-snap-type: y mandatory;
When I move the scroll and see SECTION, it doesn't do anything.

But when I scroll to SECTION 2 and others, the scroll will be moved to that SECTION like a magnet.

It works similarly to the codepen name "observer vertical slides".

See the Pen dyaKBeq by ahmed-attia (@ahmed-attia) on CodePen

But this still isn't what I want. The codepen name "observer vertical slides" feels like playing animation when scrolling.

Which may not look natural on both PC and may have problems when using Mobile.

[mvaneijgen]

Yeah, I'm not a fan of the pens @Rodrigo shared. There is nothing wrong with them, and it is really cool to see what complex things are possible with GSAP, but when you're new they are hard to understand and I personally find it difficult how to modify them!

 

The post I'd shared walks you to a process that in my eyes seems much easier to understand and because of this easier to modify!

 

 

And the one golden rule to keep in mind is 'all ScrollTrigger is doing is animating your animation on scroll', nothing more! So if we first focus on the animation at hand everything else will be a piece of cake! 

 

See here, we have 5 cards with the first one visible and they all get stacked on top of each other. Please read the post above, because it walks you to the process on how to create this with CSS (which is really important)

 

Then we animate all the cards .from() some position. Now if this is the animation you want you can uncomment  the ScrollTrigger code in the demo to see how this would work on scroll. I've set the snap property in ScrollTrigger to 1 / 4 which if converted gets your a value of 0.25, which in turn means snap to a point in the timeline (animation) in increments of 25% where the start of the timeline is 0% and the end 100%, so snapping will occur at 25% of the timeline 50%, 75% and 100% (eg 4 times for the total of 5 cards minus the first one). There are much more settings for the snap property, see the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Hope it helps and happy tweening! 

 

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