Gsap Animation Alignment Issue

At a glance

A community member is having trouble with a simple scroll animation using GSAP. The animation's trigger markers are not aligning with the "start" and "end" points. The member suspects an issue with their Webflow setup, and the animation sometimes works on the first load but not afterwards. Another community member suggests wrapping the code in a DOMContentLoaded event listener, which the original poster says they will try. The discussion continues with the original poster sharing some code and another community member suggesting the issue may be related to image loading delays, recommending using the "eager" image loading attribute or a library like imageloaded. The original poster confirms this solution worked, and thanks the community for their help.

Useful resources

OOuya Fabien

Hello 🤙
Je débarque sur GSAP avec une animation au scroll toute simple mais ça fait 2 semaines que je n’ai pas réussi à trouver la solution 😅 Les markers de déclenchement ne sont pas alignés avec “start” et “end” qui débarquent avant la section désignée ! Intuitivement je dirais que c’est lié à quelque chose de mal agencé dans mon Webflow. La dinguerie c’est qu’on a testé avec Théo et l’animation fonctionne parfois au premier chargement mais pas en suite !

Bref si vous avez un peu de temps à m’accorder, merci d’avance.
https://mobrand-studio.webflow.io/projets/leica
https://preview.webflow.com/preview/mobrand-studio?utm_medium=preview_link&utm_source=[…]emId=6703154fed5bb8f328a54015&locale=fr-FR&workflow=preview

10 comments

MManu Lechat

Tu as essayé d'englober ton code avec un truc qui attend que le Dom soit prêt ?

document.addEventListener('DOMContentLoaded', function() {
... ton code
});

OOuya Fabien

Salut Manu,
Merci pour la suggestion, je vais tester ça 🙂

OOuya Fabien

@Manu Lechat Pas certain d’avoir refermé les balises correctement 😅 … j’ai bon !?

<script> document.addEventListener(‘DOMContentLoaded’, function() { gsap.registerPlugin(ScrollTrigger); // Configurations pour les différentes animations const animations = [ { wrapper: “.mask-wrapper01”, trigger: “.section-long01" }, { wrapper: “.mask-wrapper02”, trigger: “.section-long02" }, { wrapper: “.mask-wrapper03”, trigger: “.section-long03" }, ]; // Boucle pour créer les animations animations.forEach(({ wrapper, trigger }, index) => { <a target="_blank" rel="noopener noreferrer" href="http://gsap.to">gsap.to</a>(wrapper, { width: “100vw”, // Pleine largeur height: “100vh”, // Pleine hauteur borderRadius: “0rem”, // Coins carrés scrollTrigger: { trigger: trigger, // Élément déclencheur start: “top top”, // Début de l’animation end: “bottom bottom”, // Décalage pour une fin plus naturelle markers: true, ease: “power2.out”, // Transition fluide scrub: 2, // Rend l’animation fluide et synchronisée }, }); }); }); </script>

OOuya Fabien

Arf ! toujours pas !

YYouness Benammou

@Ouya Fabien en général, c’est dû au chargement des images en décalage avec le calcul Scrolltrigger, tu peux le gérer en codant un timeout ou utiliser une lib de type imageloaded, sinon pour faire super simple tu passes tes images en “eager”

OOuya Fabien

Ok merci @Youness Benammou

OOuya Fabien

Bien vu @Youness Benammou ça fonctionne correctement à présent 🙂 Merci pour votre aide les gars, you rock 🤘

OOuya Fabien

Du coup j’ai fait un topo à chatGPT 🤓😂

TThomas Carré

T’as oublié de l’insulter mais tranquille c’est pas une compét

OOuya Fabien

@Thomas Carré Je parle toujours poliment à 🤖😅 Commence pas à flooder tu sais bien très où ça va nous emmener 🔥🤣

Add a reply

initClub · 1ère Communauté Webflow Francophone

Gsap Animation Alignment Issue