Best way to set up a standard ad with GSAP

[Fatima Osman]

Hi,

 

What's the best and most straightforward way to set up a standard Adobe Animate banner to use GSAP? I used to work with Tweenlite, etc. a lot in the past but I'm a bit out of practice these days and wanted to know what the best way to use GSAP with Adobe Animate ad is nowadays.

 

I know that all of the assets need to be named movieclip instances on the first frame. Should I use an include to access greensock through the cdn path? Will that add to the file size? Also, which specific syntax is best, gsap.to/from or timeline.to/from when working in Animate? 

 

I just want to go from basic timeline animation back to GSAP and then build those skills again a step at a time.

 

Thanks for any help you can offer!

Fatima

 

[GreenSock]

I've been out of the banner industry for many years, but I got the impression that very few people are using Adobe Animate anymore. I could be wrong. Last I checked, they were using EaselJS for canvas-based rendering when you publish from Adobe Animate. GSAP has an EaselPlugin to make that even easier. See https://gsap.com/docs/v3/Plugins/EaselPlugin

 

Yes, you'd probably just use a CDN link to load GSAP. As for file size, every major ad network whitelists GSAP so that it is excluded from file size calculations. You should check with your ad network to get their particular CDN URL(s). For example, Google/Adwords may require that you load GSAP from their particular CDN in order to have it excluded from file size calculations. Sizmek may use a completely different one for their network. 

 

As for using gsap.to() or timeline.to(), that all depends on what you're doing. Use a timeline if it helps you organize your sequenced animations. That's pretty common in banner ads. If you're just doing simple tweens, there's probably no need. There's no "right" or "wrong" way - build it in the way that makes the most sense to your brain. If you haven't read the "getting started" article, I'd recommend that. 

 

Good luck!

[Michael Barsotti]

My team and I build about a dozen banner ads a week. We just do straight HTML/js, we haven't found a graphic banner tool worth the trouble. We rely on gsap timeline and Google fonts, neither of which add file weight because of the CDN. Most of our file weight is graphics unless we add a gsap members files and those only add a KB or two.  Coupled with how awesome Greensock tutorials are and their response on this forum is we are getting by like bandits.

 

With that said it is my opinion that if you do as many banners as we do straight HTML is the way to go, if you only do one a month I would use Google Web Designer but I would also quit my job.

Edited December 19, 2023 by Michael Barsotti
L'esprit de l'escalier

[Michael Barsotti]

actually, my manager just corrected me, she's saying 25-30 in a week but she says she's seen us put out up to 100 in one week, a dozen a week is if we're slow. LOL, shows how well I pay attention.

[Fatima Osman]

Thanks for the answers everyone. I used to use straight HTML, CSS and JS with Greensock libraries for banners but I've been somewhat out of the loop for a few years and the current place at which I'm freelancing uses Animate.

 

I don't know much about EaselJS so I should look into that.

 

I have a good deal of brushing up to do. 

[Fatima Osman]

Thanks for the answers everyone.

 

Michael Barsotti, do you guys use Google fonts instead of bitmaps for the text in the banners? 

 

Also, this may be a lot to ask but I just thought I'd ask, would you be willing to share one of your project files? I used to build banners this way many years ago but it's been a while and I've gotten thrown into working on banners again, which I actually like, but I'm out of practice and just curious and want to quickly pick up as much as I can. For now I'm using Animate but want to go back to how I used to build them if it becomes a regular thing which I think may be happening. 

[Michael Barsotti]

Yes, we use Google fonts with their font loader script to avoid FOUT.

I hate my answer to the next question but my manager will not allow me to share (I don't think he understands that browsers have a 'view source' feature.) - I can outline our approach

 

We link our Google Campaign Manager and Google Studio files to the Greensock cdn to get the base animation library, membership extra files (well worth the membership fee, plus you support the developers) need to be added like any other JS file. We also link to the Google fonts. By linking to these services, Google Ad Server doesn't count the weight of Greensock (base) or Google fonts against our total KBs allowed.

 

We basically build what we think is going to be the heaviest banner first. If we have any issues with file weight, animation timing, etc. then we know early. Once the Creative and Account team review and approve the initial build we create the resizes by just copying that folder and making adjustments to the layout, if we build the animation correctly then 95+% of the time we don't even need to touch the JavaScript. 

We use gsap timelines for all of our animation, only occasionally needing to call a second timeline for animation that spans multiple key frames.

We use the Chrome plugin called "Perfect Pixel" to match up the layout of each keyframe to the artwork provided (our developers do NOT design)

We meet with the creative team to write up animation notes and confirm that we're under the maximum allowed time.

 

I looked at creating responsive banners but we had too many issues, we ended up building one set of files for each banner dimension but since we can usually use the animation in each size without having to touch anything (gsap for the win!) it's working very well for us.

 

I'm sorry I can't provide one of our templates if I had my way I would gladly do so, also because I'm sure you might come back to me with a suggestion for improvements but if I want to keep my jerb... 

 

 

 

[Rodrigo]

Hi Michael,

 

Just wanted to thank you for the detail and thoroughness of your post and your dedication to help Fatima and the community in general with your knowledge and generosity.

 

Users like you make this community what it is! 💚

 

Happy Tweening!

[Michael Barsotti]

This is what I love about the Greensock company. I've never known a business to take time to thank a user for anything. This is not the first time I've received a nice comment from them here and my time with Greensock goes back to the first release for Flash.

[Fatima Osman]

Thanks again Michael for explaining your process in detail and citing the names of plugins and such that you guys use and which could be potentially very helpful for me. I need to research all of this stuff when I get a chance. Hopefully, I'll start this weekend. Thanks so much!

[Michael Barsotti]

did you get the email I sent to your displayed email address?

[Fatima Osman]

I didn't get the email. I did a search for Barsotti in my emails and didn't see it. I feel like I would have noticed and remembered if you sent me an email. It's possible that I was maybe too stressed at some point that I could have overlooked it. I'm going to message you now and ask for your email to search through my gmail.

[Michael Barsotti]

I can't find it in my sent box, it may have been rejected with the attachment I had. I'll see if I can put it together again this weekend.

[Fatima Osman]

Ok thank you so much!