GSAP 3.0 problem with flex-direction: column

[Jun Xiang]

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

[ZachSaucier]

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:

See the Pen JjKQMWN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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.

[Jun Xiang]

 

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.