initClub · 1Úre Communauté Webflow Francophone

Updated last month

Gsap Animation Alignment Issue

At a glance

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