tsjoober Posted April 15, 2020 Share Posted April 15, 2020 I started using gsap today. In my app I use it to animate shapes. The rotation of the shape can be changed by the user, and on button click gsap animates it. When I use gsap to animate the rotation, then set it via javascript (in my case vue does this), and then try to animate again, the second animation is instant, and I don't know why. Help is appreciated! See the Pen QWjyqdW by JonnyFapson (@JonnyFapson) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 Hey tsjoober. Welcome to the GreenSock forums! GSAP keeps properties cached for quick lookup. It'd be resource intensive to constantly be checking to see if a property has been updated or not. We highly recommend setting the property using GSAP. gsap.set(box, {rotate: 45}); I might use GSAP's .delayedCall() instead of setTimeout since it doesn't run if people switch tabs but I assume that's just for the purposes of showing this behavior in the demo. Or even better, use a timeline! 1 Link to comment Share on other sites More sharing options...
PointC Posted April 15, 2020 Share Posted April 15, 2020 I wasn't even aware that rotate would work. 🤷♂️ gsap.set(box, {rotation: 45}); 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 Just now, PointC said: I wasn't even aware that rotate would work. 🤷♂️ It's a convenience given it's the standard in CSS transforms. 1 Link to comment Share on other sites More sharing options...
PointC Posted April 15, 2020 Share Posted April 15, 2020 What are CSS transforms? 🤣 1 Link to comment Share on other sites More sharing options...
tsjoober Posted April 15, 2020 Author Share Posted April 15, 2020 14 minutes ago, ZachSaucier said: Hey tsjoober. Welcome to the GreenSock forums! GSAP keeps properties cached for quick lookup. It'd be resource intensive to constantly be checking to see if a property has been updated or not. We highly recommend setting the property using GSAP. gsap.set(box, {rotate: 45}); I might use GSAP's .delayedCall() instead of setTimeout since it doesn't run if people switch tabs but I assume that's just for the purposes of showing this behavior in the demo. Or even better, use a timeline! Thanks for the quick reply. Like I said, in my case I happened to be using vuejs, and the value is set in a library I use. Is there some property like 'disableCaching' I could use to disable caching just for this one call, in order to get the initial value? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 5 minutes ago, tsjoober said: Is there some property like 'disableCaching' I could use to disable caching just for this one call, in order to get the initial value? You wouldn't want to disable cacheing. That would be terrible for performance, hah. You could do something like this: box.style.transform = 'rotate(45deg)'; // later var rotVal = box.style.transform.split('rotate(').pop().split('deg)')[0]; gsap.set(box, { rotate: rotVal}); gsap.to(box, { rotate: 90, duration: 1 }); or even better, keep track of it using a variable from the start: var val = 45; box.style.transform = `rotate(${val}deg)`; // later gsap.set(box, { rotate: val}); gsap.to(box, { rotate: 90, duration: 1 }); 1 Link to comment Share on other sites More sharing options...
tsjoober Posted April 15, 2020 Author Share Posted April 15, 2020 Thanks for the answer 😀. 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