Jump to content
Search Community

Is it possible to ignore repeating tweens on a reversed timeline

ekfuhrmann test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I have an issue where I want to reverse a timeline that has a repeating tween but am unsure of how to best accommodate it. In this example, I'd like to essentially ignore the rotation tween, and only reverse the y transform. Perhaps reverse isn't correct here and I'm better off just adding a new tween on close that reverses the y

 

What I want to happen in this example is that when I click the toggle, it instantly brings the inner__circle element back into the parent, ignoring however many iterations of repeat there has been.

See the Pen poppJZQ by ekfuhrmann (@ekfuhrmann) on CodePen

Link to comment
Share on other sites

Thanks for this @PointC.

Could you explain how .to(".circle", { rotation: "0_short" }, 0) works. I'm unfamiliar with 0_short and couldn't find anything on it when searching.

 

This really does almost nail what I'm going for, but is there a way to have it always go straight in rather than loop back towards the top like in my attached gif?

toggle.gif

Link to comment
Share on other sites

3 hours ago, ekfuhrmann said:

Could you explain how .to(".circle", { rotation: "0_short" }, 0) works. I'm unfamiliar with 0_short and couldn't find anything on it when searching.

 

It's in the CSSPlugin docs. Looks for the section about directionalRotation.

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

3 hours ago, ekfuhrmann said:

This really does almost nail what I'm going for, but is there a way to have it always go straight in rather than loop back towards the top like in my attached gif?

 

There is no easy solution for that, especially you if expect the toggle button to work mid-animation. Assuming you can't click the toggle button while it's animating back, you would have to calculate it's current position to it's start position and animate back to it, and then once it's complete, you need to reset it's rotation and transforms back to it's starting state.

 

  • Like 1
Link to comment
Share on other sites

  • Solution

I think @ekfuhrmann wanted the little target to go back to the beginning via a straight line. Kinda like this fork using a MotionPath.

 

See the Pen 2972409eda059a43f4a78b505e70d835 by PointC (@PointC) on CodePen

 

But I was think the same thing as Blake. It'll be pretty tricky since you need to reset rotations and transforms and you don't want to see any rotations as it resets. I added an inner and outer target with the outer following the MotionPath and the inner could be animated separately, but you'd need to orbit the inner target around the parent to make it work and get pretty much the same result as I had in my demo above when it goes back to the start. 

 

Personally, I kinda like the little curve as the target "goes home" as it has more of an organic feel. But maybe that's just me.

 

I'm not 100% sure about this one. 🤷‍♂️ 

  • Like 3
Link to comment
Share on other sites

@PointC Is exactly right of what I was going for. I really appreciate you and @OSUblake mentioning the added difficulty in going the route of the fork you made. This animation is a simplified example of what I am currently working on and having an understanding of whether or not it was trivial to make it go back to that start in a direct line or not really was what I was looking to learn from this thread.

 

I'm going to play around with both methods and see what feels best within the scope of my animation. Thanks for taking the time to better fill in my mental model of working with GSAP.

 

Quote

It's in the CSSPlugin docs. Looks for the section about directionalRotation.

 

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

Ah perfect. Thank you for that!

  • Like 2
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.
×
×
  • Create New...