Lucju04 Posted January 22, 2020 Share Posted January 22, 2020 Hi everybody, I'm very beginner with GreenSocks (and super excited by all GS allow to make ^^), but I would like to start with good practices. You can see the first animation I made in my code pen, so I would like to know if it's possible to write the follow animation code in a better way. Are we obliged to have 3 gsap methods to animate three objects or is it possible to make all the animation in one function ? gsap.to (".first", { delay: 0.2, duration: 2, y: 300, repeat: -10, yoyo: true } ); gsap.to (".second", { delay: 0.2, duration: 1, y: -100, repeat: -1, yoyo: true } ); gsap.to (".third", { delay: 0.2, duration: 1.5, y: 150, repeat: -1, yoyo: true } ); PS: i'm also interested by a good tutorial to understand motionPathPlugin... So.. Feel free to share ! Thanks in advance ;) See the Pen gObZBQE by luc_ju04 (@luc_ju04) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 22, 2020 Share Posted January 22, 2020 Welcome to the world of GSAP, @Lucju04! I think you're gonna enjoy yourself. Your code looks fine. You can definitely animate multiple elements with one tween, but you have each element going to different values (duration, y, and repeat are all different for your various tweens), so it's probably best to keep them separate like that. Sure, you could get fancy with some function-based values that run custom logic to spit back different values based on which element it is, but that's probably overkill for this example. And I noticed you've got the same delay on all of them, so you could drop them all into a timeline and just have the delay:0.2 on the timeline instead of each individual tween, and you could chain your to() calls together in that case but it's really just nit-picking. I'd strongly recommend reading this article to understand how to write smarter animation code: https://css-tricks.com/writing-smarter-animation-code/ - it uses the old v2 syntax, but the concepts are all the same. Let us know if you need anything else. Happy tweening! 2 Link to comment Share on other sites More sharing options...
Lucju04 Posted January 23, 2020 Author Share Posted January 23, 2020 How what a welcome Of course Greensok is exciting ! I'm starting slowly but already love it Thanks for you answer, and you readings advise, I think I can move forward with these. 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