滾動進度動畫

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