initClub · 1Úre Communauté Webflow Francophone

Updated last month

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

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

1
M
O
Y
10 comments

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

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

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

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

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

Arf ! toujours pas !

@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”

Ok merci @Youness Benammou

Bien vu @Youness Benammou ça fonctionne correctement Ă  prĂ©sent 🙂 Merci pour votre aide les gars, you rock đŸ€˜

Du coup j’ai fait un topo Ă  chatGPT đŸ€“đŸ˜‚

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

@Thomas CarrĂ© Je parle toujours poliment Ă  đŸ€–đŸ˜… Commence pas Ă  flooder tu sais bien trĂšs oĂč ça va nous emmener đŸ”„đŸ€Ł

Add a reply
Sign up and join the conversation on Slack