How to Snap each heading before going to next one.

[fawad4Real]

Hello everyone,

 

I've been learning a lot from all of you, and I truly appreciate it. Currently, I'm working on an animation project, and it's about 90% complete. However, I'm encountering three main issues that I'm struggling to resolve.

 

Firstly, I need each heading to snap to the center before scrolling it up.

Secondly, I want the headings to be closer to each other. At the moment, there's a significant amount of white space between them during scrolling.

Lastly, I'd like to slow down the scroll speed. Currently, when I scroll too fast, the headings come and go in a flash.

 

I've tried various approaches to address these problems, but I'm still having trouble achieving the final animation effect.

Any guidance or suggestions would be greatly appreciated.

 

Thank you!

See the Pen MWReGRY by Fawad4real (@Fawad4real) on CodePen

[mvaneijgen]

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. 

 

In the demo below I've removed ScrollTrigger and add GSDevTools so that you can scrub to the video to see what is happening. Your forEach loop is working at the moment, but I think this is holding you back from finding the issue you're having. I've written a post about how I sometimes try to optimise my code before it is even working and that this doesn't allow me to make the animation perfect. Sometimes you just have to write out a 'static' animation to first get the timing right, before you though in loops and if statements. Check out the post below and give it a try! Hope it helps and happy tweening! 

 

 

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

[fawad4Real]

Thanks a lot, I get it but I am still not able to snap headings to the center of div . i want user to read the heading then scroll away. so every heading will come from the bottom, snap to the center, then scroll up. 

[mvaneijgen]

Than you have to build in a delay in your animation, right now it comes in and then moves away immediately, so you have to have it come in, do nothing for x amount of seconds (I like this snippet to have a tween that doesn't nothing for 1 second `tl.add(() => {}, "+=1");`) and then move away.