Jump to content
Search Community

Strange behavior when FLIPping an element with a hover state

MadG test
Moderator Tag

Recommended Posts

Hey all. See above pen. I'm running a relatively simple FLIP animation, but when I assign a hover class to each box, the FLIP still animates correctly, but there's a flash of the boxes moving around afterward. If you comment out the &--canHover bracket set in the SCSS, it works as predicted. Any ideas why this might be happening and how I can work around it? Thanks!

See the Pen LYQrpdL by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

That's because you've got CSS transitions applied. You should never apply CSS transitions to the same things that GSAP is animating. See 

 

Quote

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 a new value and CSS transitions would interrupt and start over again, going to that new value. Over and over and over. 

 

That would not only add a bunch of stress to the browser, but it'd slow things down regarding the overall timing of the animation. For example, if the GSAP tween has a duration of 1 second and the CSS transition is also set to 1 second, that means it'd stop moving after TWO seconds!

 

Does that clear things up? 

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