[How can I animate one element at one scroll?]

See the Pen yLoxPvV by Shakir_ (@Shakir_) on CodePen

I need to pin the container and slide list items one by one. Once user gets to the container Vertical scroll should frozen. As user continues scrolling, each new list item will fade in. Once the user has scrolled through all of the list items, vertical scroll should resumes.

[How can I animate one element at one scroll?]

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

[How can I animate one element at one scroll?]

See the Pen porZKaz by Shakir_ (@Shakir_) on CodePen

 

Thank you for the quick response. This is what I have currently. What I need is, When scroll each items should appear one by one even If user scrolls faster. Like a slider. Next item will appear only after scrolled again. 

[How can I animate one element at one scroll?]

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.