Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lolitos

how can i make this animation (stopping the images)

Go to solution Solved by lolitos,

Recommended Posts

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

Link to comment
Share on other sites

  • lolitos changed the title to how can i make this animation (stopping the images)

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.

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

Link to comment
Share on other sites

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 

 

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

 

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. 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • Solution
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

 

Link to comment
Share on other sites

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 😂

  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×