Delphine

Hello, In fact, it seems to me that my bug is in the animation itself! You can see it on this code pen: https://codepen.io/afine1170/pen/XWooPZG. When I refresh the page, the words are superimposed on each other. And I can't locate the problem! Any idea to help me please?

Hello, Sorry, I continued searching for the solution and modified my CodePen code in the meantime! Here is the code that was causing the problem: gsap.registerEffect({ name: "fade", defaults: { scale: 0, opacity: 0, duration: 5, }, effect: (targets, config) => { return gsap.fromTo(targets, { scale: config.scale, opacity: config.opacity, duration: config.duration, transformOrigin: 'center center', x: 'random(-500,500)', y: 'random(-500,500)', }, { scale: 1, opacity: 1, duration: config.duration, x: 0, y: 0, }); } }); const mots = document.querySelectorAll('.b4-nuage-de-mots li'); gsap.from(mots, { duration: 'random(1, 5)', scrollTrigger: '.b4-nuage-de-mots', transformOrigin: 'center center', scale: 0, opacity: 0, x: 'random(-100,100)', y: 'random(-100,100)', delay: .8, }); mots.forEach((mot) => { mot.style.willChange = 'transform, opacity'; gsap.from(mot, { duration: 'random(1, 5)', scrollTrigger: '.b4-nuage-de-mots', scale: 0, opacity: 0, x: 'random(-100,100)', y: 'random(-100,100)', delay: .8, }); gsap.fromTo(mot, { scale: 0, opacity: 0, duration: 5, x: 'random(-500,500)', y: 'random(-500,500)', }, { scale: 1, opacity: 1, duration: 5, x: 0, y: 0, }) }); mot.addEventListener('mouseenter', () => { gsap.effects.fade(mot, { duration: 'random(3, 6)', }); }); }); Unfortunately, I still have a reflow problem. I'm still searching to identify which part... Thanks for you answer.

Hello, I need to deliver a wordpress website that I developed locally, and I have one last issue to resolve: when any page on the site loads, I encounter an error: "[Violation] Forced reflow while executing JavaScript took 43ms." Thanks to this stackoverflow page, I've identified the piece of code that appears to be causing this reflow, which you can see in the CodePen. I've tried to change my code multiple times, but nothing seems to work! I've been struggling with this issue for two days now, and I'm starting to despair. Could you please assist me in resolving this reflow issue? Many thanks for your help !