Jump to content
Search Community

Better clean code & Good practive

Lucju04 test
Moderator Tag

Recommended Posts

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

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!

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