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