Jump to content
Search Community

Hey y'all, what is your, or what is a good Adobe Animate & GSAP workflow?

Dizablah The Lamot test
Moderator Tag

Recommended Posts

I've been scouring the archives and the web but can't seem to find out a proper workflow using Adobe Animate and GSAP if there is even one or is it even worth it.

I am working off some files that were done by another developer and they seem to have used Adobe Animate for the HTML portion of is and then GSAP for the actual animation. I have been trying to break down how they managed to use both and can't seem to make it work in my head because everything that I pump out of Adobe Animate has a js file that is way overloaded with symbols and such. As I've mentioned elsewhere I am trying to get back into using GSAP so I am rusty as all get out.


I may be asking the wrong question so there's that too!


Any help would greatly appreciated.

I guess I am missing the link between how to go from Animate to GSAP. Does the GSAP happen within the Animate file? Or is published and then coded.



Link to comment
Share on other sites

Hello @Dizablah The Lamot


sorry for the delay, i had a small vacation.

I don't do much with GSAP and Animate these days but I don't think much has changed since this article was published

I would do all of my GSAP scripting in Animate inside frame actions as shown in that video.


That article also provides source files for you to explore.


In the External js file that gets exported you will find a section with the comment //stage content and in there you will see the GSAP code that you write in animate.


// stage content:
(lib.GSAPAnimateCC2017Basic = function(mode,startPosition,loop) {

	// timeline functions:
	this.frame_0 = function() {
		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");

Technically speaking you could come up with a workflow where you edit that code in that file yourself and bypass the animate publishing process. 


I never did anything beyond simple timeline banners or small generative art things in Animate with GSAP so working in the Animate IDE was plenty adequate.


The main reason I stopped using Animate for HTML5 export was that the open-source library CreateJS which is the underlying engine has been largely abandoned by the developers and Adobe so there is very little chance of any improvements. Adobe has pretty much backed away from any sort of commitment to the platform so it makes it very difficult to justify investing any of my own time into it.


It's a shame as there is tons of potential there, especially for artists who can benefit from Animate's excellent art-creation and drawing tools. 


  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

I did banners for years using both gsap and Animate, but didn't often use them together. You don't want to try moving the same things with both at once -- they won't cooperate.

The timeline in Animate is good for character animation, keyframe drawings and complex masking. Gsap is good for smooth easing, transitions and scripted effects. 

As Carl mentioned, Animate has its own library, CreateJS. You can do scripted animations using that, since it's already loaded in Animate. It's not as much fun as gsap though. 

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