Delphine Posted October 6, 2023 Share Posted October 6, 2023 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 ! See the Pen bGOQPdd by afine1170 (@afine1170) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 8, 2023 Solution Share Posted October 8, 2023 Sorry, @Delphine, but I'm not seeing any issues. Can you please be very specific about exactly how to recreate the issue and why you think it is related to GSAP? We really try to keep these forums focused on GSAP-specific questions. Link to comment Share on other sites More sharing options...
Delphine Posted October 8, 2023 Author Share Posted October 8, 2023 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. Link to comment Share on other sites More sharing options...
GreenSock Posted October 8, 2023 Share Posted October 8, 2023 If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue and explain exactly how we can reproduce the issue. How precisely do we see that error message you're getting? Link to comment Share on other sites More sharing options...
Delphine Posted October 8, 2023 Author Share Posted October 8, 2023 Hello, In fact, it seems to me that my bug is in the animation itself! You can see it on this code pen: See the Pen XWooPZG by afine1170 (@afine1170) on CodePen . 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? Link to comment Share on other sites More sharing options...
GreenSock Posted October 9, 2023 Share Posted October 9, 2023 That's because you set up several animations to run first, and THEN you were calling the function that ran the .from() which rendered those elements the proper way. I'm not sure why you put that in an onComplete to run in sequence instead of just dropping it into the parent timeline directly so that the function runs right away: See the Pen yLGGQKb?editors=0110 by GreenSock (@GreenSock) on CodePen Also, you could set the initial state of things in CSS and then use a .to() instead of a .from() to avoid the "FOUC". 1 Link to comment Share on other sites More sharing options...
Delphine Posted October 10, 2023 Author Share Posted October 10, 2023 Quote Also, you could set the initial state of things in CSS and then use a .to() instead of a .from() to avoid the "FOUC". How could I know that my problem was called FOUC!!!! Everything lights up! But I have to review all my copy now!!! Many thanks GreenSock superhero!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now