Jun Xiang

I see... Thank you so much!

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?) issue-2_sMe3OB4K_Skcz.mp4 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. ??

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.

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