rala Posted November 18, 2021 Share Posted November 18, 2021 Hi, why the animation when I add the scroll Trigger become not smooth and every item in the row appears suddenly See the Pen wvqQWgQ by roleno (@roleno) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 Hey @rala, Did you maybe mean for the animation to be triggered as the user enters that section - rather than scrubbed through? See the Pen JjyxJqb by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
rala Posted November 18, 2021 Author Share Posted November 18, 2021 yes I think so , but may I ask you what the scrub exactly do ? I have another question please when I have multiple items in the same section and I want to animate them one after another when the section appears in the viewport for the user before I add the scroll Trigger to the timeline I did this by add label to the timeline but after I add the scroll Trigger all the items appears at the same time (note: the items not have the same CSS class or the same animation) and thank you so much for the quick answer Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 Sure thing! scrub ties the animation to the scroll progress - if you add it scrub:true back in and scroll slowly up and down you'll notice it 'scrubbing' through the animation. scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. As for your next question it sounds like you want to be doing a loop of some sort. Maybe like this? If this isn't helpful could you make a demo so I can see? ✨ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now