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

[Dizablah The Lamot]

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.

 

 

[GreenSock]

I haven't used Adobe Animate in years, but I'd highly recommend @Carl's courses if you're trying to get back into GSAP: 

https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

He's got some on Animate in there as well I believe. 

 

Good luck! And welcome back  

[Carl]

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) {
	this.initialize(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. 

 

[MichaelSmith00]

Hello guys, Im really sorry for bumping old thread, but Im searching similar information. Hope I will fix my probs with best essay writing services, because I really don't know what to do now. My dissertation is really hard for me and I can't complete it alone for excellent mark. Hope writers will help me.

[geedix]

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.