Weird caching behaviour?

[tsjoober]

 

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

[ZachSaucier]

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!

[PointC]

I wasn't even aware that rotate would work. 🤷‍♂️

 

gsap.set(box, {rotation: 45});

 

[ZachSaucier]

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.

[PointC]

What are CSS transforms? 🤣

[tsjoober]

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?

[ZachSaucier]

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 });

 

[tsjoober]

Thanks for the answer 😀.