crbopp99 Posted March 4, 2021 Share Posted March 4, 2021 Hi, I'm trying to toggle a keyframe animation using a gsap function. Any tips or tricks? I have no clue how to approach this. See the Pen xxRzJvx by crbopp (@crbopp) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted March 4, 2021 Share Posted March 4, 2021 I have no idea what your trying to do but it seems you can set the animation-play-state with gsap. I'm not too familiar with css keyframes but I imagine you could control other properties in a similar fashion. See the Pen NWbzJRp by Visual-Q (@Visual-Q) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 4, 2021 Share Posted March 4, 2021 Welcome to the forums, @crbopp99 That seems super weird to use GSAP to toggle the play state of a CSS animation. Ha. I'd just animate with GSAP and skip the CSS stuff. I wonder if this is what you were trying to do?: See the Pen 50c72fcec6b4448e01bed07b27ccbd16?editors=0010 by GreenSock (@GreenSock) on CodePen I'd personally recommend animating an actual image (x and y properties - transforms) instead of backgroundImage because you'll usually get better rendering performance and browsers typically force background-position to snap to whole pixels which can make it look a bit jerky at slow speeds and small distances (totally unrelated to GSAP). It's up to you, of course. Happy tweening! 3 Link to comment Share on other sites More sharing options...
crbopp99 Posted March 7, 2021 Author Share Posted March 7, 2021 On 3/3/2021 at 10:29 PM, GreenSock said: Welcome to the forums, @crbopp99 That seems super weird to use GSAP to toggle the play state of a CSS animation. Ha. I'd just animate with GSAP and skip the CSS stuff. I wonder if this is what you were trying to do?: I'd personally recommend animating an actual image (x and y properties - transforms) instead of backgroundImage because you'll usually get better rendering performance and browsers typically force background-position to snap to whole pixels which can make it look a bit jerky at slow speeds and small distances (totally unrelated to GSAP). It's up to you, of course. Happy tweening! Thank you! That's exactly what I was trying to do! Now how do I make all the buttons do that animation but have it reset and then refill when I click another button? Link to comment Share on other sites More sharing options...
Solution PointC Posted March 7, 2021 Solution Share Posted March 7, 2021 Is this what you needed? See the Pen 8966e64da7444bf47a5c3f51f2b15026 by PointC (@PointC) on CodePen Happy tweening. 4 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