End scroll at last card (pinned element)

[AntonioNB4]

Hello community, how can I make the scroll stop at the last card? I'm trying different values, but if I set it to +=100%, the scroll is too fast. If I increase the value to give it the right speed, the scroll ends too late after the last card. So I was wondering what value I could use to make the scroll stop at the last card.

Best regards.
Antonio

 

See the Pen dyLbKVR by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

What is it you're trying to do? I understand your question, but what is the underlaying animation your are trying to build? 

 

If I disable all JS and remove some CSS, so that the page can scroll normally the effect looks almost the same, the only thing your animation does now is add some stagger and some smoothness, but that is much easier to make with our https://gsap.com/docs/v3/Plugins/ScrollSmoother/ plugin, easier to manage and has much more options so to can set elements faster and slower. 

 

If you're set on making this work I would restructure your layout, have all the text stacked on top of each other and move them in and out via an animation, they can come just from off screen, so that it looks like you're scrolling. I've written a card stacking guide, but the logic will also apply to this effect. 

 

Hope it helps and happy tweening! 

 

 

[AntonioNB4]

41 minutes ago, mvaneijgen said:

What is it you're trying to do? I understand your question, but what is the underlaying animation your are trying to build? 

 

If I disable all JS and remove some CSS, so that the page can scroll normally the effect looks almost the same, the only thing your animation does now is add some stagger and some smoothness, but that is much easier to make with our https://gsap.com/docs/v3/Plugins/ScrollSmoother/ plugin, easier to manage and has much more options so to can set elements faster and slower. 

 

If you're set on making this work I would restructure your layout, have all the text stacked on top of each other and move them in and out via an animation, they can come just from off screen, so that it looks like you're scrolling. I've written a card stacking guide, but the logic will also apply to this effect. 

 

Hope it helps and happy tweening! 

 

 

I'm sorry, I've modified the CSS, and now with the background, the effect is much more understandable.
I'm trying different values, but if I set it to +=100%, the scroll is too fast. If I increase the value to give it the right speed, the scroll ends too late after the last card. So I was wondering what value I could use to make the scroll stop at the last card.

@mvaneijgen

[mvaneijgen]

Yep, then I would still go the route of the post I've shared. There is a bug in your HTML and not all <div> elements have a. So I had remove some things to quickly fix this. 

 

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. 

 

Hope it helps and happy tweening! 

 

See the Pen gOyYjWJ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen