Jump to content
Search Community

Swaying Object with GSAP

leonardpbd test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hi, I wanted to animate a boat and I can't figure it out how to do it using GSAP. 

I want it to have a sway effect and turn around once it reached the destination X.

I used scaleX: -1 but it doesn't look good per the demo. I want it to instantly flip once it is going to the other direction. 

Also how can I do the sway effect? I tried to add rotation:5 but again it will just take effect once it reached its destination.
Is there any way I can do from rotation:5 to rotation:-5 on its way to destination X?

See the Pen jOyNPzg by leonardpbdigital (@leonardpbdigital) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @leonardpbd :)

 

Welcome to the forum.

 

There would be a few ways to create that animation. I think the simplest approach would be to use a set() for the scaleX when the boat reaches the end of the first animation. For the rocking I would suggest a separate tween that just repeats. It doesn't need to be part of the timeline. Here's a fork with those changes.

 

See the Pen 8fbce57328d58f78ed650789f756a4eb by PointC (@PointC) on CodePen

 

If you're just getting started with GSAP, I'd recommend:

 

Our very own @Carl also has loads of training materials to get you started.

https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

 

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