Jump to content
Search Community

GSAP + Tailwind — transitition oddity

tomKnox test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello there

During some brushing up on my greensock skills (I haven't touched gsap since the heydays of Flash) I am late, but slowly transitioning into HTML / javascript. Now we are talking about transitions. Please see the codepen above. The button does not tween in.
Because of - I assume- transition ease-in-out duration-200


This does not seems to work:

<button class="py-3 px-5 w-full font-semibold border hover:border-gray-300 rounded-xl focus:ring focus:ring-gray-50 bg-white hover:bg-gray-50 transition duration-200" type="button">Create Free Account</button>

Removing transition ease-in-out duration-200

Does seem to allow the button to tween in.

See the Pen oNPdjZB by nitras (@nitras) on CodePen

Link to comment
Share on other sites

  • Solution

Correct, you should definitely avoid having CSS transitions applied to elements that you're animating with GSAP. That's terrible for performance because the browser would constantly be interrupting things. For example, let's say you animate width to 500px from 100px. On every single tick (requestAnimationFrame), GSAP would set the interpolated value but the CSS transition would basically say "NOPE! I won't let you do that yet...I'm gonna transition to that new value over the course of ____ seconds..." and it'd start interpolating. But on the very next tick, GSAP would set the new value and CSS transitions would interrupt and start over again, going to that new value. Over and over and over. 

  • Like 2
Link to comment
Share on other sites

Sometimes you'll can get away with it when you know you'll only animate certain properties with CSS and others with GSAP, but it seems like tailwind will just put a bunch of transitions on it and I think you don't have control over that. The culprit here is `transform`.

 

transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;

Another thing you could do is wrap the element in a div and animate that parent div with GSAP and keep the transitions on the button. 

 

I still make that mistake a few times a year and then am debugging for like half an hour to figure out why my animation is not looking correct.  

  • Like 2
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...