Setting time result is different from playing animation

[tsjoober]

Hey,

I have stumbled into what seems to be a bug.

In the demo I provided the button 'Play animation' plays an animation (timeline).

The button 'Set animation' pauses the animation and sets it to a specific time (1.2s).

The expected result is that the image is slightly shifted to the right, and rotated by about 130deg.

But the rotation isn't applied at all!

Please note: It may be necessary to reload the demo before using 'Set animation', as the styles may need to be reset.

 

The issue seems to be that the two properties (rotation and translate) use the transition property, but gsap isn't able to calculate this, when setting the time directly.

Regardless this issue is very weird, as the actual animation does work, but setting a specific time doesn't.

 

Does anyone have help/info on this?

See the Pen eYZgLLz by JonnyFapson (@JonnyFapson) on CodePen

[ZachSaucier]

Hey tsjoober. This is because you're trying to animate both the transform property directly and indirectly. We recommend that you do not animate the transform property directly. Plus it's a good bit simpler (x: 50) 

See the Pen XWdpxaV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, we highly recommend that you use the sleeker GSAP 3 syntax:

 

You might also be interested in learning more about the GSAP 3 features: