Jump to content
GreenSock

Lark

Make an element rotate back and forth and back and forth

Go to solution Solved by Cassie,

Recommended Posts

Hi!

I've been following guides and also finding some nice things on the forums, but I got myself stumped.

In the codepen I was trying to make a box, that spins around randomly back, then forth, then back again and so on until you get tired.

I tried moving the repeat to the tween and adding yoyo, and this is the most reliable way I found to do it.

But if you watch closely, every so often the box would snap to a new position, not sure why, and I don't know how to stop it. 😧

See the Pen gOGPBaQ by LarkRanger (@LarkRanger) on CodePen

Link to comment
Share on other sites

Hey there @Lark,

 

I think the 'snap' you're talking about is the reversed 'back' ease? Maybe?

 

If we were to do a linear ease is this behaviour what you're looking for?


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


 

Link to comment
Share on other sites

Just now, Cassie said:

Hey there @Lark,

 

I think the 'snap' you're talking about is the reversed 'back' ease? Maybe?

 

If we were to do a linear ease is this behaviour what you're looking for?

 


 

 

No, unfortunately if you look at it long enough it still snaps back at some point, seemingly randomly. I wanted the "back" ease for the overshoot effect, but it doesn't seem to make a difference anyway.

  • Like 1
Link to comment
Share on other sites

  • Solution

Mmm. I can't see that but maybe it's to do with how you're invalidating it?

Maybe try repeatRefresh?
 

On 11/29/2020 at 8:44 PM, akapowl said:

repeatRefresh Setting repeatRefresh: true causes a repeating timeline to invalidate() all of its child tweens and re-record their starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.


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

  • Like 1
Link to comment
Share on other sites

Oh, fabulous! That DID do it! replacing `onRepeate` with `repeatRefrtesh` definitely solved it. The callback must have been interfering with something. Thanks so much!

  • Like 1
Link to comment
Share on other sites

Oh fab! Glad I could help 🥳

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×