MadG Posted June 2, 2022 Share Posted June 2, 2022 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 More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 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? 1 Link to comment Share on other sites More sharing options...
MadG Posted June 2, 2022 Author Share Posted June 2, 2022 @GreenSock I think so. So the solution here would be to handle that hover effect using js? Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 Yep, GSAP for all the animation sweetness of course I'm not saying you should never use CSS...just be careful, that's all. There are tradeoffs. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now