Jump to content
Search Community

swing-like animation/ease?

Jess.Park test
Moderator Tag

Recommended Posts

I want to make wave animation with a rectangle div by swing-like movement.

Imagine you have a cup of water, and if you push the cup, the water will be moving & rotating(from front view) left and right and slowly returns to original position.

I want to mimic that movement.

 

What I'm thinking is,

1. change div's `y` value (to move up)

2. when div starts moving up, it also starts moving & rotating left and right like swing does.

3. it slowly returns to original `x` & `rotation` (like swing slowly stops at the end)

4. If div's `y` value changes again, it repeats 1~3 again.

 

I tried using Bounce ease, physics2d but I just can't seem to achieve what I want.

I've attached a video of sloppy prototype. It's really bouncy, but I don't want that bounce. I want it to move smoothly.

 

Please help me!

Link to comment
Share on other sites

that's awesome!

 

But I want the div to move left & right also, not just rotating. (which I failed to do in the prototype video above)

I drew a picture to describe what I want. I want the div to follow the red curve left & right smoothly, until it slowly returns to the middle.

And I want to be able to adjust that curve by `rotation` value or some other value, to set how much that curve should be bent.

So I'm hoping I can achieve this effect without drawing any svg curves manually. Is that possible?

screenshot.png

Link to comment
Share on other sites

After closer look at your codepen demo code, I really like the idea of using diff to set how much div should rotate.

It would be awesome if the left&right movement that I mentioned above, reacts the same way with diff. The bigger the diff, deeper the curve.

Link to comment
Share on other sites

Hi @Jess.Park,

 

To achieve that arc path (left/right and vertical, with rotation), you could just set the transformOrigin to have a negative Y value, and that way you could control the radius of your rotation, using the diff as above.

 

This example doesn't use the diff, but you can see the negative transformOrigin value in action:

 

See the Pen QWwqbog by ryan_labar (@ryan_labar) on CodePen

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