gsap and scrollTrigger Pin/snap

[digitalfrci]

Hello can someone help one achieving one animation?

what i want is when i scroll and as soon that the section hpslider hit the top it pin this section (lock in a fullscreen mode)
so that i can scroll to other section even if i scroll fast ( the other section should be visible )
then when i scroll down it should change slide ( like a slider effect on mouswheel )

i want to force the user to view all slide before going to next section

on the last slide the user should be able to scroll to next section normally ?

is it possible ?


edited : example i want to achieve a bit something like that 

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

but only when the section hpslider hit the top so i can scroll down to change slide like the example and at the end its release so i can go to next section

 

See the Pen PoXzoON by lolong94 (@lolong94) on CodePen

Edited August 31, 2023 by digitalfrci
got example https://codepen.io/GreenSock/pen/XWzRraJ

[mvaneijgen]

The example you've linked is using the Observer plugin https://greensock.com/docs/v3/Plugins/Observer. This is totally different from ScrollTrigger. ScrollTrigger uses the native scroll and the Observer plugin can watch for scroll events to trigger some logic. 

 

Here is an example that mixes normal scrolling with the Observer plugin. Hope it helps and happy tweening! 

 

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

 

[digitalfrci]

very one one its help a lot . Thanks

but i have some question
there is another way to do it with scrolltrigger ? 
what about if i have every slide to have its own timeline animation ?
and if i want to change every slide direction ?  is this possible to achieve something like that ?

[mvaneijgen]

35 minutes ago, digitalfrci said:

there is another way to do it with scrolltrigger ? 

There are always ways to get something to do what you want, the same as it is possible to force a square peg in to a round hole. The question is how much effort do you want to put in to get it to do what you want? 

 

If you want native scrolling use ScrollTrigger. If you want to control the scrolling I would suggest the Observer plugin.

 

40 minutes ago, digitalfrci said:

what about if i have every slide to have its own timeline animation ?

Sure? I don't see way not. Personally I'm more a fan of putting all the tweens on one timeline and controlling that.

 

39 minutes ago, digitalfrci said:

and if i want to change every slide direction ?  is this possible to achieve something like that ?

That is the beauty of GSAP, everything is possible. Keep in mind that everything starts with an animation, so focus on that at first, before you start building out fancy interactions. 

[digitalfrci]

Thanks a lot for your time and explanations 

did you have an example for this one:

Quote

Sure? I don't see way not. Personally I'm more a fan of putting all the tweens on one timeline and controlling that. ?

or this 
 

Quote

That is the beauty of GSAP, everything is possible. Keep in mind that everything starts with an animation, so focus on that at first, before you start building out fancy interactions. 

 

[mvaneijgen]

No not really, there are several examples on the Greensock codepen in the Observer collection.

 

https://codepen.io/collection/KpNYOd

 

And there even more collections with other GSAP tools

 

https://codepen.io/GreenSock/collections/?cursor=ZD0xJm89MCZwPTU=

 

The difference is with GSAP vs other tools is GSAP gives you the tools to build what ever you like, you're not restricted in any way, so the only thing that is holding you back is you're own creativity!