Scroll-Fortschrittsanimation

Question

Ich muss wissen, wie man den Scroll-Fortschritt animiert. Dabei handelt es sich nicht um den normalen Scroll-Fortschritt, sondern um etwas anderes. Ich stelle einen Link zur Website sowie einen Screenshot des spezifischen Teils bereit, der die von mir gesuchte Animation enthält.

https://todoist.com/

Dies ist der Link zur Website.

Ich habe einen Screenshot eines bestimmten Abschnitts der Homepage der Website angehängt.

Wenn Sie auf der Seite scrollen, erfolgt das Scrollen innerhalb des Abschnitts und der Abschnitt scrollt in sich selbst. Sobald dieser Abschnitt des Scrollens abgeschlossen ist, scrollen Sie normal weiter. Ich kann viele Tutorials zum Scrollen von Fortschrittsbalken sehen, aber nicht diesen speziellen Animationsstil

Answer 1

也许这个例子能帮助你解决问题。 CodePen 使用AnimeJS + ScrollMagic。

简单地说：

// 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);