Jump to content

Quick Start: GSAP and Adobe Animate CC 2017

| GreenSock

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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. actions-panel.png

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.

Snag the source files

Download source files to see the example code above in action.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock

User Feedback

Recommended Comments

There are no comments to display.

This is now closed for further comments