animasi kemajuan tatal

Question

Saya perlu tahu cara menghidupkan kemajuan tatal. Ini bukan kemajuan tatal biasa, tetapi sesuatu yang berbeza. Saya akan memberikan pautan ke tapak web serta tangkapan skrin bahagian tertentu yang mengandungi animasi yang saya cari.

https://todoist.com/

Ini adalah pautan ke laman web.

Saya telah melampirkan tangkapan skrin bahagian tertentu halaman utama tapak web.

Apabila anda menatal halaman, tatal berlaku dalam bahagian dan bahagian itu menatal dalam dirinya sendiri. Setelah bahagian menatal itu selesai, teruskan menatal seperti biasa. Saya dapat melihat banyak tutorial tentang menatal bar kemajuan, tetapi bukan gaya animasi ini

Answer 1

Mungkin contoh ini boleh membantu anda menyelesaikan masalah tersebut. CodePen Gunakan AnimeJS + ScrollMagic.

Ringkasnya:

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