scrolltrigger Vertical slideshow doesn't work properly

[Alain Nobilito]

Hello.

 

I'm facing a problem with an animation i want to create with scrollTrigger. I join a codepen to explain my issue.

 

I have a div .slides between other content and it's composed of several slides. When i reach my div .slides, I want it to pin to the window and its slides should be displayed progressively, sliding from the bottom of the screen. When the last slide is  displayed, the rest of the content must scroll normally.
 

I tried multiple thing but i failed

 

Anyone to help me and show me what's wrong in my code. I would be grateful

Thank you

 

See the Pen yLrqWMP by alain-nobilito (@alain-nobilito) on CodePen

[mvaneijgen]

First of this is really important! ScrollTrigger can only be on the whole timeline or on a single gsap.to() (or .from()) tween. As soon as you define a timeline ScrollTrigger needs to control the whole timeline, it can't control individual tweens that are on a timeline, logically this is impossible.

 

Next 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 placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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

[Alain Nobilito]

Thank you for your clear answer : I learnt things with it (I apologize for the delay of my answer : I went to holidays the past weeks.)

 

Nevertherless, I'm facing another problem and unfortunately, my skills with this library are not enough advanced to solve this. I hope someone here can help me and explain what i'm doing wrong. I join to this topic a codepen and a video that show what i'm expected

 

I have a page with 3 distinct blocks. The first and third ones are blocks with content. the second one is a vertical slideshow and it's where ScrollTrigger comes in.

When we arrive at the second section, I want the slider staying fixed in the middle of the screen and when I slightly scroll towards bottom, we pass to the next slide. When each slide is passed, the window continues to scroll as normal. Of course, by scrolling to the top of the screen, we have to get the same behaviour but in reverse.

 

With my code, i have a vertical slideshow which takes the whole height of the screen but i can't do a slideshow that takes a defined height. When I try to limit that height, things don't works like I want.

 

The previous message in this topic helped me to better understand how scrolltrigger works and must be used : thanks a lot for that ; I used the code for inspiration for my own code but sadly i can't reach my needs.

 

I hope someone her could enlight me and help me to progress in my ScrollTrigger learning.

Thanks a lot.

 

A video showing what i try to do : https://drive.google.com/file/d/1qg6O92_WfFFozMP9UXY616X4VUDMk3Hu/view?usp=sharing

My CodePen : 

See the Pen MWdKNVr by alain-nobilito (@alain-nobilito) on CodePen

 

 

[mvaneijgen]

First of check out this post it shows how you can make a stacking card effect animation which you then can hook to ScrollTrigger (or what ever else) 

 

 

ScrollTrigger is build to animate things based on the scrollbar position of the user, but I have the feeling you want to play a fixed animation no mater of the visitor scrolls a lot or a little, that is not something for ScrollTrigger then you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ 

 

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

 

And here an example that mixes normal scroll with the Observer plugin

 

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

 

It feels like the current setup you're trying to build your own Observer plugin, before taking any next step I would remove all scrolling logic code and first focus on building an animation. Everything in GSAP starts with an animation and if you then want to scroll it based on the scrollbar you add ScrollTrigger or if you just want to animate to the next slide you use the Observer plugin, but first your animation needs to be solid. Below another example which used a timeline and the Observer plugin which on scroll just animates to the next label in the timeline. Hope it helps and happy tweening! 

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

[Alain Nobilito]

Thanks a lot for your answer. I see now more clearly what i'm doing wrong and how gsap/scrolltrigger works.

 

I'm going to watch, test and learn thanks to your advices. 

 

Have a great day.

[Alain Nobilito]

Hello 

 

Thanks a lot for your answers. Thanks to your comments, I have reached my goal and my animation is like i wanted to be.
 

Have a nice day