Quick Start: GSAP and Adobe Animate CC 2017

Adobe Animate CC 2017 made big improvements to how external libraries like GSAP can be loaded into your projects. The video below shows everything you need to do to get up and running quickly. This video is intended for audiences that are familiar with working with Animate CC and have some knowledge of the GSAP API.

Add GSAP to your Animate CC project

Adding external scripts that are globally accessible can be done through the Actions panel as illustrated below.

Safe EaselJS properties to animate

Animate's HTML5 "export for canvas" renders everything at runtime using the EaselJS library. Every object in Animate is converted into an EaselJS object and it's important to be aware of which properties are available to be animated. For instance, there is no support in EaselJS for width, height, or 3D rotation (rotationX, rotationY). There's plenty you can do with the properties below:

x
y
alpha
scaleX
scaleY
rotation
skewX
skewY
regX
regY

Since at its core GSAP can animate any property of any JavaScript object, all of the above properties are fair game. You don't even need to load any additional plugins. For more information on the above properties be sure to read the documentation for Easel JS DisplayObjects. Although it may be obvious to some, it's worth stating that CSS properties that the CSSPlugin typically handles like color, fontSize, border, transformOrigin, etc. don't exist in the EaselJS world. Once you understand what properties you can animate, you can tap into all the core tools of GSAP and use the same familiar syntax.

var tl = new TimelineMax({repeat:3, repeatDelay:0.5})

tl.from(this.logo_mc, 1, {y:300, rotation:360, scaleX:0, scaleY:0, ease:Back.easeOut})
  .from(this.GreenSock_mc, 0.5, {x:200, skewX:45, alpha:0}, "+=0.5");

Animate color properties with EaselPlugin

Use GSAP's EaselPlugin to tween special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter.

//necessary to cache element before applying filters
this.city.cache(0, 0, 800, 532); //left, top, width, height

var tl = new TimelineMax({repeat:3, yoyo:true});

tl.from(this.city, 1, {easel:{exposure:3}})
  .to(this.city, 1, {easel:{hue:180}})
  .to(this.city, 1, {easel:{colorFilter:{redMultiplier:0.5, blueMultiplier:0.8, greenOffset:100}}});

You must load the EaselPlugin into your file in addition to TweenMax if you want to tap into the special features that EaselPlugin provides. EaselPlugin is included when you download GSAP or you can load it from CDNJS. Be sure to read the EaselPlugin docs for more information.