Jump to content

Doctor XTN

Got Animate. How do I get GSAP up and running in it? Basic Q.

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

OK, so I admit I spent no time in Edge. Found a tutorial for GSAP in Edge that starts to become confusing as the programs are different. 


I also admit to perhaps missing the super obvious here. I used GSAP in Flash for years and the importation process was incredibly simple. 


So, how do I get GSAP to talk to Animate so I can tween my elements using those magical 'to' and 'from' lines of code?

Forget anything else. Help me get the hosted libraries working (end target Double Click, who hosts it as well) and tell me where to type my GSAP code (maybe there's a documentation link I haven't come across in my searching).


Do I make my bitmaps Movie Clips? Do I name them? Like in Flash.


I know this sounds basic, but I've been stuck in GWD hell since The Illuminati turned of Flash in September and I just hate timeline animation. 


Next questions will be how to make the ad clickable/tap-able and as mentioned before, what code to insert for DoubleClick (while this has been covered elsewhere, I'm still figuring it out). 


Thank you so much.

Link to comment
Share on other sites

I will get the answer started. You will uncheck in publish settings, overwrite HTML, so the addition of the link(s) to GSAP don't get overwritten


In your HTML doc you will add the SSL compliant link to the DC hosted GSAP library file(s) you plan to use. Simply creating a button symbol in Animate Cc will give you a cursor. For DCM you will add your clickTag var and your window.open  to your HTML document. For the clickTag you will use this in the head: <script type="text/javascript">var clickTag = "https://www.google.com";</script>. You will add this right before the ending > to your canvas div: onclick="javascript:window.open(window.clickTag)".


I personally uncheck create spritesheet, and prepare my assets so that I have as small as possible k weight, something I learned in the 40K SWF days. Any transparent bitmaps can benefit from https://tinypng.com/


Some DCM documentaion says that ads may not contain a JSON file, this is the reason for not using spritesheets, though I have not tested it to see if it will lead to rejection or not.


I strongly recommend watching this banner specific MAX presentation. A caveat is that it is no longer necessary to break apart text, in Animate CC, as that is automatically done on publish.




There is also an Ad Helper class



//Text Plugin




Edited by somnamblst
  • Like 2
Link to comment
Share on other sites

Great job, Somnablst!


I created a video for Flash Pro's HTML5 export and from what I can tell from using Animate CC briefly the concepts are the pretty much the same:



Also regarding ads, Patrick has provided a great set of templates that handle things like clickTags, mouseevents and more:


  • Like 1
Link to comment
Share on other sites

I think some banner specific timeline code snippets would help.  For instance Patrick's sample file uses this on a Canvas FLA single frame timeline. Both the text and the CTA button are movieclip symbols with instance names of txt and cta. 

TweenMax.set([exportRoot.cta, exportRoot.txt], {alpha:0, y:'+=50'});

var tl;

document.rollOverFunction = function () {

document.rollOutFunction = function () {

document.displayCTAHighlight = function () {

document.startAnimation = function () 
	tl = new TimelineMax({onComplete:document.displayCTAHighlight});
	tl.set(banner, {visibility:'visible'});
	tl.staggerTo([exportRoot.txt, exportRoot.cta], 1, {alpha:1, y:'-=50', ease:Back.easeInOut}, 0.15);
  • Like 1
Link to comment
Share on other sites

Also, if you create a profile similar to the ones I've included you can always include the JS imports and not worry about them being overwritten.

  • Like 4
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.