Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

[SOLVED] Transition Css & GSAP | Conflict

Recommended Posts

Hello GSAPers,
I created the courage to ask a question I always had, why does Ease (GSAP) not work correctly when the element has Transition (CSS)?

Sometimes I want to create a simple hover through css, but I always see strange behavior if I'm animating the element in a Timeline:

 

Demo:

See the Pen xzNRze by Noturnoo (@Noturnoo) on CodePen

 

Link to comment
Share on other sites

That's because GSAP is stronger than CSS and it will beat up all CSS transitions. ?

 

I think if you limit the CSS transition to background only, you should see the desired results.

transition: .8s background ease-out

 

See the Pen vrwyMK by PointC (@PointC) on CodePen

 

Of course, you can always use GSAP for the hovers too and prevent all potential conflicts. Hopefully that helps.

:)

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

in fact I did not even know that there was a way to put the transiton only for certain attribute of style. By these and others I speak, living and learning, and learning from the best (GSAP Moderators). ❤️
Thank you for the explanation

  • Like 3
Link to comment
Share on other sites

Just to add a little more clarity, when a property has a CSS transition applied, ANY change to that property will be delayed by the browser and gradually applied according to the duration you set on the CSS transition. So let's say you've got a 1-second CSS transition applied on an element and then you do a GSAP opacity tween from 0-1 with a duration of 0.5 seconds. Well, GSAP sets the value on every tick (60 times per second) and every single time, the browser says "oh, I'm not gonna show that right away...since there's a CSS transition applied, I'm gonna take a whole second to gradually make that change that GSAP just applied." So your 0.5-second GSAP tween looks weird and takes a lot longer (1.5 seconds in this case) because the CSS transitions are getting in the way. 

 

I hope that helps explain what was going on under the hood and why it's generally not a good idea to mix JS animations with CSS ones. 

 

Happy tweening!

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

In fact it is only for simple cases like hover, even knowing that you can use GSAP to do the hover, sometimes the css solves with simplicity and everything there at the time of stylization.
But his explanation was very enlightening.

Many thanks Jack, not only for the explanation but for developing a tool that is
certainly  is the revolution of web animations ❤️
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×