Jump to content


GSAP Best Practices - beautify order of properties?

Recommended Posts

GSAP noob over here... and loving it so much!

I was just wondering if anyone has established beautify setups to share?

I've grown accustomed to using the order of CSS properties I stole from Bootstrap and the OCD in me is itching for something similar in GSAP.

eg for CSS order of properties:

1) Positons (absolute, top, left, z-index etc)
2) Box-model (block, padding, margin, etc)
3) Layout (flex & grid type of stuff)

And so on...

It's worth noting for CSS I just used a feature in PHPStorm that allows you to create a list of the order you want. So I'm not sure if the same will be possible with GSAP. I guess I'm just asking out of interest for the most part.


Link to comment
Share on other sites

Hey IOIIOOIO and welcome to the GreenSock forums.


As with CSS, there are many different ways to order properties. I tend to do something like the following:

gsap.to(elem, {
  // I always put duration first
  duration: 1,
  // I usually put the properties to animate after that
  x: 100,
  // At the end I put all the other non-animated properties
  ease: "sine.inOut",
  repeat: -1

If I only have one or two properties I might do it all in one line. If I have more than that I almost always put each property on their own line.

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