Some elements are not shown in next.js?

[sagar_dev]

I have a sequence of animation with heading, button and some Icons. All the animation is handled by gsap.timeline. While heading and icons animation is working well but the animation of button is not working. The css added by gsap i.e. opacity is 0 and visibility is 'hidden'

 

https://codesandbox.io/p/sandbox/bitter-http-fvq4mx

[Rodrigo]

Hi,

 

Your button has a duration-200 class that adds a CSS transition duration to it. Removing it seems to make it work the way you intend:

https://codesandbox.io/p/sandbox/infallible-thunder-h6yjpj?file=%2Fapp%2Fpage.tsx%3A47%2C11

 

Hopefully this helps.

Happy Tweening!

[sagar_dev]

4 minutes ago, Rodrigo said:

button has a duration-200 class that adds a CSS transition duration

Didn't know CSS transition has these kind of bug in GSAP. Thank your for the hint really appreciate it.

[Rodrigo]

Yep, never mix them up.

 

GSAP basically updates the styles of an element in during a specific amount of time (the tween's duration). So if you are mixing GSAP and CSS transitions as soon as GSAP updates a style (something GSAP's ticker does 60 times per second) CSS will take over and animate that change.

 

We try to avoid CSS transitions completely around here (for obvious reasons ), but if you want to use them be 100% sure that the property being animated using CSS transition is not the same as one being animated by GSAP to avoid the aforementioned collision and conflict.

 

Hopefully this clear things up.

Good luck with your project and Happy Tweening!