Jump to content


Using classes with Animate CC and GSAP

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 - Looking to rebuild an old site I'd made in Adobe Flash (CS6) using the GAIA framework (no longer supported) along with some Greensock code.


Was watching a tutorial that showed how 'Stagger' could be used with TweenMax so if you had several items of the same class (say 5 navigation buttons), you could animate those onto the screen in interesting ways.


I've included the GSAP code into a new Animate CC project, but I can't figure out how to assign several symbols / movie clips / or buttons a class so that TweenMax can animate them. I do have Dreamweaver CC as well as Brackets, and a rudimentary understanding of HTML, actionscript, javascript, and css though I haven't used those much for a few years - so would appreciate some assistance (& workflow tips ) for getting off the ground.



Link to comment
Share on other sites



Regardless you will want to store the instance names of all your MovieClips in an array and then use that array as the target of a staggerTo like

var myClips = [mc1, mc2, mc3];

TweenMax.staggerTo(myClips, 1, {x:100}, 02);


I'm not sure from your post if you are using ActionScript or JavaScript. They are both similar but it would help to know for sure for us to provide the best answer.



  • Like 1
Link to comment
Share on other sites

I'm using JavaScript - just entering it into the 'Actions' layer in the first frame within Animate CC after Including the GSAP library.

Just tried ading three movieclips and naming them nav1, nav2, and nav3. 

Then put those into a var myNav = [nav1, nav2, nav3] 

But when I hit Test, I'm not getting any results when I try to use TweenMax as you showed above.


Is there anything i need to do with the index.html file before testing? Or some other initial steps i need to do?



Link to comment
Share on other sites

Make sure you are targeting the clips right. 

With js you need the this keyword. 


var myClips = [this.mc1, this.mc2]

  • Like 1
Link to comment
Share on other sites

Thanks so much - that fixed it.

Will make sure to review some basics on javascript to minimize silly mistakes going forward.


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.