[Violation] Forced reflow while executing JavaScript took 43ms

[Delphine]

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

[GreenSock]

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. 

[Delphine]

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.

[GreenSock]

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? 

[Delphine]

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?

[GreenSock]

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". 

[Delphine]

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!!!