[how can i make this animation (stopping the images)]

27 minutes ago, mvaneijgen said:

I have restructured your code a bit to create an animation for each `<li>` without a stagger. This way I could add an empty animation that does nothing for 2 seconds.  

 

With ScrollTrigger you can set an `end` postion with I have given each `<li>` a scroll height of 1000 pixels, so you need to scroll 4000 pixels for the whole animation to finish (eg four times a `<li>`) 

 

Because ScrollTrigger will animate on scroll position instead of time you can use the duration of a tween in an other way. Each animation in my example is 4 seconds and this will animate over 1000 pixels. So with this knowledge 2 seconds is 500 pixels (1000 pixels / 4 seconds = 250 pixels is 1 second) ,  so every 500 pixels the animation will do nothing until it fades away again and the new `<li>` animates in 

 

 

 

 

You can play with these values yourself to tweak them to your liking, but I would stay away from `duration: 46` because bigger nummers doesn't mean longer if your scroll distance stays the same it will just make it harder to calculate the real pixels value. 

 

Hi thanks for the help, i think this is the best option. I didn't know how to make an empty animation. It works great and I have more control.
yeah `duration: 46` at this point i was just experimenting to see if it would do something 😂. 

[how can i make this animation (stopping the images)]

36 minutes ago, Cassie said:

Hey there - welcome to the forums. Thanks for the demo!

If I understand you want it to go slower? If so you just have to increase the distance being scrolled. The further you scroll the slower it will be.
 

 

Hi thanks for helping me, your solution was what i was looking for, but when i implemented it in my code it didn't work as intended. 

See the Pen VwQGrjL by lulu-be (@lulu-be) on CodePen

 

[how can i make this animation (stopping the images)]

Hi, so i saw these after the hero section https://novaturdesign.com/ and i like it a lot. I try to do something similar but with a different animation, but mine doesn't have that kind of control. 
I made a codepen with where I am at the moment. But it's too hostile and not intuitive , if i increase the number of elements appearing i have to change all the values to try to get the best result, plus we developers may be able to scroll slow and back and forth but a normal user will just make a quick full scroll and get through most images.

 

Is there a way to make the image stop? or is there a better approach ?

See the Pen ZErMJQE by lulu-be (@lulu-be) on CodePen