animation de progression du défilement

Question

J'ai besoin de savoir comment animer la progression du défilement. Ce n'est pas la progression normale du défilement, mais quelque chose de différent. Je fournirai un lien vers le site Web ainsi qu'une capture d'écran de la partie spécifique contenant l'animation que je recherche.

https://todoist.com/

Voici le lien vers le site.

J'ai joint une capture d'écran d'une section spécifique de la page d'accueil du site Web.

Lorsque vous faites défiler la page, le défilement se produit dans la section et la section défile en elle-même. Une fois cette section de défilement terminée, continuez à faire défiler normalement. Je vois beaucoup de tutoriels sur le défilement des barres de progression, mais pas ce style d'animation particulier

Answer 1

Peut-être que cet exemple peut vous aider à résoudre le problème. CodePen Utilisez AnimeJS + ScrollMagic.

En termes simples :

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