Jump to content
Search Community

How can I animate one element at one scroll?

Shakir Wahid test
Moderator Tag

Recommended Posts

gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline();
let bulletLi = jQuery('.slider li');

bulletLi.each(function(e){
  tl.to(this, { duration: 3, x: 0, opacity: 1 })
})
 
 let st = ScrollTrigger.create({
    animation: tl,
    trigger: '.js-bullet-info',
    start: "top top+=10",
    end: "bottom top",
    scrub: 2,
    pin: true,
 })
 
Hi all. I need a help on animating one element at a time. When I scroll faster it animating all the elements continuously. I need to animate each element on each scroll. How can I do this.
Thank you.
Link to comment
Share on other sites

Hi @Shakir Wahid. Welcome to the forums!

 

I don't understand the question. Can you please provide a minimal demo (like a CodePen) and clarify your question? 

 

What do you mean by "animate each element on each scroll"? What would one scroll be exactly? A certain distance? You can extend things further by adjusting the end value, like end: "+=5000" would mean it'd take scrolling 5000 pixels to get through that whole animation.

 

You also don't need to do a jquery.each() to stagger those animations. You can simply:

tl.to(".slider li", {x: 0, opacity: 1, duration: 3, stagger: 3});

 

Link to comment
Share on other sites

3 hours ago, Cassie said:

Hey there @shakir!

 

I think you may be looking for wheel/touchmove/pointermove events - not scrolling?

Take a look at this thread and see if this helps.

 


 

Thank you @Cassie. This is what exactly I am looking for. I need to implement this with ScrollTrigger pinning. When user scrolls to the container, it should pin on the container and continue the slider like this https://www.gsj.be/en. Once the last slide (animation) completed pin should disable and scroll as regular

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.
×
×
  • Create New...