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
Tu as essayĂ© d'englober ton code avec un truc qui attend que le Dom soit prĂȘt ?
document.addEventListener('DOMContentLoaded', function() {
... ton code
});
@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>
@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â
Bien vu @Youness Benammou ça fonctionne correctement Ă prĂ©sent đ Merci pour votre aide les gars, you rock đ€
@Thomas CarrĂ© Je parle toujours poliment Ă đ€đ Commence pas Ă flooder tu sais bien trĂšs oĂč ça va nous emmener đ„đ€Ł