[Is using useLayoutEffect some sort of last resort for gsap if animation doesn't work as expected]

I see... Thank you so much!

[Is using useLayoutEffect some sort of last resort for gsap if animation doesn't work as expected]

I used gsap.fromto animate a component when it is rendered through a conditional statement

something like below:

 

const [openComponent, setOpenComponent] = useState(false);

<button onClick={_=>setOpenComponent(true)}>Open</button>

return {openComponent && <Component/>}

 

and in the Component.jsI used useEffectto render the animation

useEffect(_ => {
      gsap.set(ref.current, { y: 0 });
      gsap.from(ref.current, {
          y: "-100%",
          duration: 0.5,
          ease: "expo.out",
      });
}, []);

However, the Componentsometimes rendered in its original position (y=0) before starting the animation. It means you will see a flick of the component before the animation starts.

When I changed useEffectto useLayoutEffect, it doesn't happen.

I have another component called Loading which uses a similar logic as above and the flick doesn't happen. I went through the forum and found this post

It is true that the Component has a React.fragment (Loading doesn't have React.fragment)but when I removed it, the flick still happens unless I use useLayoutEffect.

Another difference of the Loading from the Component is that Loading is less complicated.

Component structure:

<div>
  <div>
  	<div>
  	  <p></p>
      <div>
        <span></span>
        <span></span>
      </div>
	</div>
      <div>
        <p></p>
      </div>
      <div>
          <p></p>
      </div>
    </div>
  </div>

Loading structure:

<div>
  <img/>
</div>

Here is a video example (Ignore the watermark😅)

 

I am not familiar with codepen or any other online editors to code a React in it and make an example. Sorry for the inconvenience. 😁😅

[GSAP 3.0 problem with flex-direction: column]

 

14 hours ago, ZachSaucier said:

Hey Jun and welcome to the GreenSock forums.

 

You're making a couple of the most common GSAP mistakes: 

1. Not setting all of your transforms on elements that you're animating with GSAP and
2. (more minorly) using the old syntax for your eases.

See if this works better:

 

 

 

It's also possible that browsers are simply reporting the incorrect values. But at this point it doesn't seem like a GSAP issue to me.

Thanks! It really works! I was finding a solution for the whole day. Thank you so much!! Tutorials I watched did not teach me this way tho. I also did not notice that there is a mistakes page for GSAP. Definitely going to read through.

[GSAP 3.0 problem with flex-direction: column]

I made a simple animation which is by translating the Y axis from 1em to -50%. However, there was some weird calculations that happened on the #issue element. I purposely set the duration to 5seconds so that it will be more obvious.

 

I also faced the same problem stated above but I couldn't recreate the problem i was facing. It was a project that I was working on using react hooks. It might be browser problem as when i tested my project in Firefox, the problem is the same as the problem in the codepen and when tested in Edge and Chrome it works perfectly fine. I originally planned to report this in Bugzilla but then when i was preparing the codepen, the problem happened in both Firefox and Edge. The HTML layout, CSS and JS is exactly the same in my project and in codepen but i got different results which is weird. They are both affected by the CSS property: flex-direction. If you comment it out, it works as expected.

 

PS: The problem I stated might sound confusing... sorry for that if it is. I am very new to GSAP too...

 

Edit: It seems like the preview here is working fine but when I go to the link it is not...

Edit2: As I am not allowed to upload more than 500kB file, I will share a clip of the problem in this google drive link

See the Pen MWeMmqV by jun-xiang (@jun-xiang) on CodePen