Use current element position in keyframes

[ben-324234]

Hello!

 

I'm sure this must have been asked before, but I'm unable to find a solution as yet.

 

I have a timeline set to a box; when the user hovers over it, I want it to shake a little from side to side. For this I've used keyframes.

 

On mouse enter it works, but if you quickly mouse out and back in again, the timeline plays from 0, creating a jump in the animation, which isn't ideal. I did try using an anonymous function, but that doesn't work.

 

So: how can I use the current rotation of the box as the value of a keyframe?

 

In case it complicates things, I also have it set to shake on viewport enter, so I've included that in the demo.

 

Thanks in advance 🙂

See the Pen eYXLwJW by benwakeford (@benwakeford) on CodePen

[GreenSock]

When a tween renders for the first time, it records internally the start/end values so that it can very quickly interpolate. If you want to flush those, you can invalidate() the timeline  so that next time it renders, it re-reads them fresh. 

See the Pen qBvMejB?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[ben-324234]

Absolutely spot on, can't believe I missed it in the docs. Sometimes you can't see the wood for the trees and all that...

 

Thanks for the prompt response Jack, very much appreciated