Jump to content


Best practice or advice in naming variables

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Everyone, this is not a animation related question, just wish to get some advices or suggestions to name tweens animation. :)

How do you guys modularise your code or name your variables in terms of code readability.

For example,

var $object = $('.object');

This allows me to have a quick glance and know this is a jQuery or DOM element.


Currently im using something like this, so I can tell it's a animation type

var _obj = TweenMax.from($object, 0.6, { autoAlpha: 0, ease: Power1.easeOut });

But I really wish to use the underscore _ as a private method/function identifier. Do you guys prefix your animation var names?

Feel free to drop me any suggestion or advice :)

Link to comment
Share on other sites

Hi Buntafujiwaaa  :)


I always use the $ character for jQuery elements, but rarely use an underscore. That's just me though. I think the best advice is be consistent. If you look through CodePen at some of the best coders work, you'll see how they do it. Here's a couple of our own masters:





Blake Bowen



Others may jump in with additional advice, practices and preferences.


Happy tweening.


  • Like 1
Link to comment
Share on other sites

I generally use an underscore for something that's "private" in terms of scope, though not local variables inside of a function. Just a stylistic choice, not "right" or "wrong". I'd be curious to hear other people's opinions as well. I don't do anything special to indicate that a variable is an animation (tween/timeline). I almost always name my timelines "tl" locally inside functions, and "master" for a master TimelineLite/Max if/when I'm nesting things. 

Link to comment
Share on other sites

I always try to go for code readability. Computers have no trouble reading your code. Humans, not so much. So I try to be as descriptive as possible with naming.


My naming convention is nouns for objects, with pluralization for anything that might be a collection.

var box = $("#box");
var boxes = $(".box");
var numbers = [1,2,3,4];

And verbs for functions...


I used to do the $ sign for jQuery/elements, but have started to move away from that since other libraries like Angular also use the $ sign, and that can cause confusion.


I avoid using underscores unless the intent is to signify that something is private, and you should not access it from outside the object. I also use lodash.js/underscore.js a lot, which uses underscores, so it helps to reduce confusion by limiting my underscore naming to only properties/methods on an object.

var foo = {
  _x: 0, // private
  get x() { return this._x; }, // public


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