leonardpbd Posted March 22, 2021 Share Posted March 22, 2021 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 More sharing options...
Solution PointC Posted March 22, 2021 Solution Share Posted March 22, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now