Delphine
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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!!! -
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? -
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 !
See the Pen bGOQPdd by afine1170 (@afine1170) on CodePen
Better solution for forced reflow timeline animations?
in GSAP
Posted
I have the same problem and after reading this post, I would like to find this link: https://greensock.com/fouc which may be a clue 😉