scroll progress animation

Question

I need to know how to animate scroll progress. This is not the normal scrolling progress, but something different. I'll provide a link to the website as well as a screenshot of the specific part that contains the animation I'm looking for.

https://todoist.com/

This is the link to the website.

I have attached a screenshot of a specific section of the homepage of the website.

When the page is scrolled, the scrolling occurs within the section, and the section scrolls within itself. Once that section of scrolling is complete, continue scrolling normally. I can see a lot of tutorials on scrolling progress bars, but not this particular style of animation

Answer 1

Maybe this example can help you solve the problem. CodePen Use AnimeJS ScrollMagic.

general speaking:

// Add scrollmagic controller
let controller = new ScrollMagic.Controller();

// Add timeline
let tl1 = anime.timeline({autoplay: false});

//Then add some animation ... and

//Add first scrollmagic scene
let scene1 = new ScrollMagic.Scene({
 triggerElement: "#one",
 triggerHook: 0.5,
 reverse: false
})

//Play 
// Trigger animation timeline
.on("enter", function (event) {
 tl1.play();
})
 
.addTo(controller);