Issue with object resetting after timeline call

[FARIOA]

Hi,

I am relatively new to greensock, but I am trying to have the block maintain it's rotation and movement in between calls of spin instead of having the block reset every time. How would I go about this? I thought the to method moves from the object's current location?

Thanks in advance. 

See the Pen GRQGJdr by gstops (@gstops) on CodePen

[PointC]

Hi @FARIOA,

 

Welcome to the forum.

 

You'd want to use relative values for that. This will add a new tween to the timeline on each click.

let spin = function () {
  spinSquare.to(".outer", {
    duration: 1,
    delay: 0.5,
    ease: "power1",
    rotation: "+=45",
    x: "+=200"
  });
};

Keep in mind that you are adding a new tween to the timeline on each click, but you're also playing the timeline from 0 each click as well so it still jumps back to the beginning.

 

See the Pen 29bacc336e2b6b66474c023dfc2cba7a by PointC (@PointC) on CodePen

 

Happy tweening.

 

[FARIOA]

Thank you @PointC! My mind totally missed relative values. That would certainly do the trick. However, I realized that I missed something small in my codepen. In my actual project, I put a ,0 after the "to" method to set it to the first spot in the timeline. I don't want to run the animation repeatedly in the timeline, instead, I want to have the object save the rotation amount so that it starts from there each time I click spin. I coded it as such because in my actual project, I use a random value for the amount of rotation that takes a couple of variables, so the spin amount changes each time. How would I go about this? Let me know if you need more information about it, or if you would like me to create another codepen for it.

[PointC]

Sounds like you're looking for the invalidate method.

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

If that doesn't help, an updated demo would be great. Thanks.

 

[FARIOA]

@PointC Yep. That would be EXACTLY what I'm looking for. You're a lifesaver, and also quite possibly a mind reader. (No clue how you understood what I meant and found the method I needed). I know who to ask if I have more questions...

 

Thank you so much for your help!