Jump to content
Search Community

Smooth tween transitions in combination with transformOrigin

AdObeOne test
Moderator Tag

Go to solution Solved by AdObeOne,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I'm trying to animate a coin smoothly into a hole in the ground. As far as I can figure out I need to use transformOrigins to realize the necessary tweens. But the transitions between the tweens should be smoother. I tried various eases but this is the best I could achieve. The slowMo ease is used to realize smooth tweens. Is there a way I can use slowMo in this case to make the whole animation smoother?

 

Thanks in advance for your help,

 

Ad

See the Pen mVQLZX by AdObeOne (@AdObeOne) on CodePen

Link to comment
Share on other sites

I didn't have a lot of time, but I forked your pen and made a few adjustments to smooth out the turn for you.

 

When you're making a turn like that, I'd recommend not using an easeOut on the first tween because it will come to nice smooth stop before turning and look a bit odd. (As you found out.) I also switched some of the Power eases to linear. I left your original in my pen so you can compare the two versions and keep tweaking it until it meets your needs.

 

See the Pen KVLKjp by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 6
Link to comment
Share on other sites

Hi there :)

 

a couple of things to note:

  • the initial translation and rotation must have the same duration and ease, and the rotation must be 360°, if you want to give the impression that the coin rolls on the ground instead of sliding (movements are synchronised)
  • that movement probably looks best with easeIn, and then all the subsequent tweens must be linear because the movement is already at full speed; the only value you should tweak is the duration
  • other than that, it's pretty straightforward: you can make the coin rotate by 90° around the point that touches the ground (that's what you did)
  • after that rotation, I found it easier to set the new rotation and position values at the same time as the new transform origin
  • that way you can approach the remaining "drop" as a whole different thing :)

 

Here's a demo I made, you can tweak it however you want: 

See the Pen QyRwqN by Acccent (@Acccent) on CodePen

  • Like 3
Link to comment
Share on other sites

Actually, I went back to this because I realised I'd made a couple mistakes!

 

First of all, the initial translation and rotation do need to have the same duration and easing, but the rotation doesn't need to be 360° at all. It actually needs to be equal to 360 * x / ( d * π ), with x = the translation and d = the coin's diameter. In this case: 360 * 200 / ( 50 * π ) ≈ 458.37, so let's use 450 because it's 5 * 90 which is convenient.

 

So you know that after the initial movement, the coin will be right at the edge of the hole, and rotated by 90°. Now you need to change the transform origin but if you do that, you need to adjust its position as well! If you don't, the rotation will be applied using the new origin as a reference. So you need to 'slide back' the coin to where it was before changing its transform origin.

 

Then you apply the 90° rotation that makes the coin go over the edge, and then once again you need to change the transform origin, so again you must translate the coin so that this change is invisible.

 

After that you just need to have the coin finish rotating and slide towards the bottom of the whole.

 

I've updated the codepen, here's the link again: 

See the Pen QyRwqN by Acccent (@Acccent) on CodePen

edit: here's one where it falls in the second hole, for fun: 

See the Pen qbGbXK by Acccent (@Acccent) on CodePen

  • Like 3
Link to comment
Share on other sites

  • Solution

@Jonathan: Strange. It worked just fine. But now it doesn't anymore. Not even in CodePen :-(

@PointC: Thanks for your scarce time and the side by side pen. Very handy to see the differences. That sure helps ;-)

@Acccent: Thank you for the extensive explanation and the second attempt.

I hope you not only helped me, but others as well.

  • 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...