Jump to content


Animate CC GSAP Starter File Needed

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

Yeah the file I shared is from an idea we are working on to standardize banner production.

We do a lot of DOM creation too but being able to build canvas ads in Animate CC with GSAP is just excellent. When I can combine timeline animation with coded animation its a perfect day.


Using Profiles in the Publish Settings of Animate CC makes it simple to modularize typical parts of a banner. Who remembers digging around in the Flash Configuration folders in order to customize the HTML wrapper (blurghh)...so happy to see something like this come along. This feature will be huge for people once they wrap their head around it. 


Concerning the clickTag code - in my experience with Standard Banners, as long as the clickTag vars are in the Global Scope you're good. I keep all my other JS wrapped in a closure or a nice Module Pattern...yummy

I also don't like clogging up my divs with JS clickTag code even if it is small. Just my preference.


I am hoping expand and improve templates like this for banners, apps, sites etc...

I have another template I am working on that uses PixiJS for sprite sheet animation and certain particle effects. I know OSUblake will appreciate it. I will share that too when its ready.


I'm can't tell you how excited I am to see Animate CC and GSAP (and many other frameworks) working so nicely together. It's gonna be a kickass year!

  • Like 2
Link to comment
Share on other sites

Hey guys, I made an update to the template for both Standard and Rich Media.


I forgot that when you are uploading the DoubleClick you need to use the DC GSAP link:



I tweaked the retina scripts and added a small animation that shows how to target sprites using GSAP from the timeline or the main JS file.


This is a work in progress so please report mistakes or any suggestions on how to do things more efficiently.


- Patrick


  • Like 2
Link to comment
Share on other sites

The only question I have Patrick, and I do fault DC for not making this division more clear, is are you using DCRM also known as Doubleclick Studio for a reason, now that we no longer need to use Studio simply because we have multiple files. I was told by our contact that unless I was doing expanding, video, or dynamic, that DCM was the route to go.


DCRM uses enabler.js 


DCM uses  <script type="text/javascript">var clickTag = "https://www.google.com";</script> and onclick="javascript:window.open(window.clickTag)"

Link to comment
Share on other sites

correct, Rich Media units in DC Studio use the Enabler.exit commands

standard units use regular clickTags

Link to comment
Share on other sites

I guess my biggest concern is that the majority of banners are not Rich Media, and perhaps clearly labeled template files like say banner_DCRM, banner_DCM would prevent someone from inadvertently building to the wrong specs.


And that is coming from the Publisher side where agency provided creative does not fail until it gets to DFP. I found that everything you could possibly do to make it fool proof helps.


One other thing. I noticed you have console.log. Apparently that needs to be removed before publish due to old versions of IE

Link to comment
Share on other sites

Hi Patrick,


thank you so much for the template.

I tested it and it works great.


I have one question though.

As soon as I import a bitmap to the stage in Animate CC, the document.startAnimation function does no longer work.

I always get an error stating that document.startAnimation is not a function.

Once the page is loaded and I call the function from the console in Firebug it can be found though.

So I believe it has to do with a delay due to loading of the bitmap. (?)

Can anyone check if this error can be reproduced?

I just started with GSAP, hope some pros can help me. :-)


Thanks in advance


Link to comment
Share on other sites

Upload your file and I'll take a look.

  • Like 1
Link to comment
Share on other sites

The adapted template with a bitmap is here:



If you run it like that the function is not working.

If you remove the bitmap from stage everything is working properly.

Thanks in advance. :-)

Link to comment
Share on other sites

I'd be careful using 2 functions called windowLoaded() 

I suggest renaming your function in the FLA to something more appropriate to the methods inside

startAnimation() for example


You also don't need this extra load call. The body init is already doing this.

Rename your function in the FLA to startAnimation and then move the function into the init via CreateJS in your Profile template.


That will fix it

function init() {

  stage.scaleX = stage.scaleY = window.devicePixelRatio || 1;
  console.log('window loaded');

- Patrick

  • Like 1
Link to comment
Share on other sites


Thank you so much Patrick. :-)

It's working great now.

  • Like 1
Link to comment
Share on other sites

sure happy to help. As time goes by I'll upload new templates.

This first set was literally the first 2 I created. As with all templates they will change and improve over time. ;)


- Patrick

Link to comment
Share on other sites

So for fun I added a bit more interactivity and 2 images.

In the Standard profile there is a call to the game function. This should help you get started.


Until the JSON issue is worked out in Animate just publish without sprite sheets.


See if you can win!



Link to comment
Share on other sites

Hi guys,


Firstly, thanks Carl for the example animation file... It looks similar to how I was doing things in Edge Animate so it's nice to see it working in Animate CC too.


The issue I am having is, as a newbie to Flash / Animate CC, I can't get any tweens to work on a button hover or press using TweenMax.


Here's the action I have on the timeline for my button:

this.info_hover_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
	// Start your custom code
	// This example code displays the words "Moused over" in the Output panel.
	var tween = TweenMax.to(this.info_text_1, 2, {x:'-=100',ease:Back.easeOut});
	// End your custom code

Any help guys would be much appreciate so I can start playing with and Animate CC properly!






Finally got things working. (note when adobe apps give you trouble quit everything and restart)


To me the AnimateCC + GSAP process seemed the same as for Flash Pro 2015.

The only hassle was that Chrome was caching my files so every time I did a test I had to refresh as well.


Attached is my very basic setup with one tween

Link to comment
Share on other sites

  • 5 months later...

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.