GSAP + Tailwind — transitition oddity

[tomKnox 4 Likes (Newbie)]

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

[mvaneijgen 1,729 Likes (Superhero)]

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. 

[tomKnox 4 Likes (Newbie)]

Thank you. That clears some things up for me.

Pretty hard to both brush up on gsap, learn tailwind and html at the same time

Cheers

[mvaneijgen 1,729 Likes (Superhero)]

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.