Jump to content


ease getting overridden

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

I have some mouseenter effects on buttons that are using TweenMax that looked really nice. We added a sticky topbar nav (using Foundation) that I added css transitions to the "fixed" state because we wanted the nav bar to be about 20px shorter, and adding the css transitions made it so much smoother. However, I noticed that setting the transition changed my easing function on the JS calls to Tweenmax on my mouseover animation. Yes, the TweenMax calls and CSS3 transitions are set on the same elements. Any way around this nasty side effect? I really need both effects to have different easing values.


So I'm trying to use Power4.easeOut but it's getting overridden to this:

transition: all 200ms cubic-bezier(0.480, 0.485, 0.540, 1.000);

I'm 99% certain this is correct because everything goes back to normal if I comment out the css3 transition code, but then animates terribly when it's uncommented.

Link to comment
Share on other sites



I've never worked with css transitions and GSAP on the same element at the same time, so I can't help you directly with that. But it definitely sounds like possible trouble.


Could you set up a codepen or fiddle in order to see a live and reduced sample of your problem?.


One thing you could try is use the engine's SlowMo ease function to replace the cubic bezier transition, is not the same but it might help.


Take a look at the api reference here:



Also check this codepen I've made using the SlowMo ease:

See the Pen tgEBn by rhernando (@rhernando) on CodePen


Hope this helps,



Link to comment
Share on other sites

Any particular reason you need to use all for your transition? Can you change your CSS transition to this and try it?

transition: height 200ms cubic-bezier(0.480, 0.485, 0.540, 1.000);

TweenMax is trying to update the values many times per second, and each time it applies a change, the transition:all 'tween' is being applied on top of those changes. Every update to the style by TweenMax starts a 200ms transition to that style as well.


You can probably test this by making your transition duration really high (e.g. 10000ms), and your TweenMax duration really tiny (e.g. 0.1); you should see the final value after 10s instead of what you defined in the tween.


There's no real way around it without making your CSS transition more specific.

  • Like 2
Link to comment
Share on other sites

Yep, Jamie nailed it - you're compounding things on top of each other by applying css transitions on the same elements/properties. Each and every time TweenMax makes an update, your css transitions are kicking in and starting all over again. That, of course, makes it feel like it's easing differently, but that's not really the case - TweenMax is doing its job correctly, but the transitions are dragging things out and getting in the way. 


My advice: never apply transitions to the same properties/elements you're tweening with GSAP. 


Also, were you saying that the animation wasn't smooth with GSAP? If so, try adding a z:0.01 on the element to force it into its own GPU layer. In almost every situation I've seen, GSAP is just as fast or faster than CSS transitions, except when sometimes when animating a lot of transforms on mobile devices (most notably iOS). 

Link to comment
Share on other sites

Thanks for the replies. I really appreciate it. 


I have the 'all' in there more as me being lazy. The transition settings are being applied to a whole bunch of elements at the same time, so it was just easier to put in 'all'. I'll see if I can narrow it down though. 


@Jack: what I meant was the animation itself is smooth but the wrong easing makes the rollover appear unnatural.


EDIT: Just to close this up, Jaime's fix solved the problem.

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.