Shakir Wahid

https://codepen.io/Shakir_/pen/yLoxPvV 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.

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

https://codepen.io/Shakir_/pen/porZKaz 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.

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.