Jump to content
Search Community

[SOLVED] Transition Css & GSAP | Conflict

Victor Work test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 4
  • 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.
×
×
  • Create New...