滚动进度动画

Question

我需要知道如何制作滚动进度动画。这不是正常的滚动进度，而是不同的东西。我将提供网站的链接以及包含我正在寻找的动画的特定部分的屏幕截图。

https://todoist.com/

这是网站的链接。

我已附上该网站主页中特定部分的屏幕截图。

滚动页面时，滚动会在该部分中发生，并且该部分会在其自身内滚动。该部分滚动完成后，继续正常滚动。我可以看到很多关于滚动进度条的教程，但看不到这种特殊风格的动画

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