en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en sv fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en tt en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en hbs_lat en en en en en en en en en en en en en en hbs_lat en en en en en en en en en en en en en ru en cs en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en es en en en en en en en en en en en en en en en en en sv en en en en en en sv fr en en en en en en en en en en en en en en en en en en en en en en de en fr en en en pt en de en en en hu en nl en nl en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Web Dizajner    65 Likes (Contributor)
I am creating hand-coded GSAP, Edge Animate, Animate and GWD banners which depend of design, deadline, price and customer.
Hand coding is not smart option for fast mass production of banner ads. Is it possible for one developer to prepare assets, hand code and prepare for specific ad server full set with 10 sizes for one 8-hour work day? With Edge Animate and Animate is possible.
I do that all the time? So Yes.
This really is a circular discussion. It boils down to personal preference and level of experience. Nothing more. Trying to say one is better than the other is the same as arguing whether blue is better than red.
The answer will always be "there is a case for each option".
Just last week I've build a full campaign of 54 creatives in under 2 working days, using Bannertime, and saved so much time.
The beauty of handCoding is that You can automate it. But that's not "hand coding" anymore. I would call it automated DOM code generating, which is merely different from writing every   and #css by hand. I personally writing only the GSAP tweenScript by hand, all other code and asset is autoGenerated.
Yes, there’s definitely best use cases for both. To be clear, we’re talking about creating banners via modifying the DOM with HTML CSS JS or GSAP versus pixel manipulation using Canvas, with Adobe Animate CC being the GUI to work with Canvas API. We’re also talking about banners and not websites or apps. There’s a huge difference between the two, lots of restrictions to deal with in banners, and many other things to take into consideration, especially animation. I know a lot of folks are coming from a website development background and think in those kind of terms but don’t really have much experience with animation or working with banner restrictions and its limitations.
- DOM✔️: Modifying the DOM is probably your best bet. Your browser’s graphics API makes this a lot simpler than what Canvas or Animate CC’s current offerings have. Need it to work on a device with device orientation where the layout changes? DOM is definitely the better option. In Animate CC, having to reposition everything in JavaScript is going to be major pain in the butt, whereas CSS can do the majority of the heavy lifting for you.
Working on a larger banner such as a full screen banner?
- DOM✔️: Canvas can be kind of slow redrawing large areas.
Have a complex animation with a lot of moving parts that’s not interactive?
- CANVAS✔️: Canvas is really really fast in comparison to the DOM.
- CANVAS✔️and ANIMATE CC✔️: You’re not dealing with delivering font files to users, so you don’t need web fonts like the DOM. Your fonts looks the same across all browsers. And hey, lets be honest. Clicking on a text field to change it’s text, having a color picker, font picker, letter-spacing, and alignment tools, all in a nifty little GUI panel close by is certainly convenient. Yes, I know you can work around having to use fonts in the DOM by using PNG’s or using SVG, but again, let’s be honest — that’s not efficient at all.
Have dynamic text? Doing a programmatic banner?
- DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases.
Have a more complex mask than a simple rectangular shape?
- ANIMATE CC✔️:  The only widely-supported DOM method in current browsers for more complex masking with the DOM that you can use in banners is using SVG. You’re likely doing something in Illustrator to create the SVG, then grabbing the code, cleaning it up, possibly optimizing it, and coding it to work with masking your DOM elements. That process is slow in comparison to Animate CC. In Animate CC, you just draw a mask using the built in tools, or copy and paste from Illustrator, right click, and select Mask to mask a layer. Done.
Dealing with Retina display or scaling imagery?
- BOTH✔️, but leaning more towards ANIMATE CC✔️: There are two issues here. Considering that with banners you need to package everything up and file size gets counted for all assets as a whole, then I believe Canvas / Animate CC is the better option here mainly because of bitmap rendering between the different browsers. Yes, with HTML you have srcset, CSS media queries, etc. That’s great for websites but in banners that all goes out the window since it all needs to get packaged up and the file size gets counted as one. And because of THAT, brings us the next consideration: which one does a better job at scaling bitmap imagery for use with Retina display (or if you need to scale a bitmap in general). Ever scale a bitmap or slide a bitmap in the DOM and get that choppy look in some browsers? Your image ever look weird after scaling in the DOM? That’s because of subpixel rendering / antialiasing. Canvas and Animate CC does an excellent job at this whereas the DOM and some browsers (not all) can do a real crappy job at this. And let's not forget that it looks the same across the board in Canvas.
Also, there are built-in vector drawing tools that Animate CC has that can scale similarly to SVG — great for when targeting Retina display in banners. Animate CC can take care of Retina automatically.
Have a really complex animation that’s more than slide this way, scale up or down? I’m talking more complex mograph or even character animation that a seasoned animator would create.
- ANIMATE CC✔️:  Animate CC wins this one with its timeline and built in tools for animation like onion-skinning, motion guides, etc. There’s a good reason why applications such as After Effects exists and why people aren’t animating TV commercials with C++. Yes, you can do motion guides with hand-coding. But creating a path with a GUI, right clicking, and selecting motion guide is multitudes faster and more efficient, especially if it takes many attempts or when you’re experimenting with animations twenty or 30 times over the course of an hour. Imagine how long 20 - 30 motion guides would take to hand-code? Ever try and do character animation in GSAP?
- CANVAS✔️and ANIMATE CC✔️: If your banner concept is a linear animation, QA is virtually non-existent in Animate CC. It’s going to look identical across the board. That’s certainly not the case when dealing with the DOM — browsers render things much differently and you can spend quite a bit of time and resources dealing with QA. Again, that's just for linear animations
Other banner-specific features that Animate CC has:
- There’s AdHelper with its Sleep and Wake, Retina support, Performance monitoring, etc. All stuff that comes with it. You’re likely not building that into your DOM-based banners. All certainly helpful, especially considering what banner best practices should be and the new LEAN specs coming out soon.
So again, it depends on your banner project and what you think is best. You can certainly do most everything with the DOM but you may just want to consider taking a peek at what Animate CC can do. I, personally, use both methods, but enjoy using Animate CC simply because I come from a Flash background (who also coded) — plus looking at Sublime editor all day gets old really fast. I work for myself for ad agencies, and knowing that ad agencies always have a fast and furious timeline, efficiency is definitely of high importance and something else to keep in mind. What are you most efficient at?
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 20, 2017
Have dynamic text? Doing a programmatic banner?
- DOM✔️: Animate CC can’t embed fonts just yet (because of font rights I’m guessing?), only uses TypeKit fonts (I could be wrong though). I haven’t even tried it in Animate CC because the DOM makes more sense in those cases.
Animate CC 2017 use Google Fonts.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted February 22, 2017
Animate CC can’t embed fonts
Actually Animate CC by several updates ago, converts all text using any font you have access to, to shapes described by createjs, a dynamic text field would still get published as a js file, would it not? Have you done any geo location dynamic banners?
Share on other sites
davi    141 Likes (Specialist)
Posted February 22, 2017
Actually Animate CC by several updates ago, converts all text using any font you have access to, to shapes described by createjs, so your text becomes something like this
this.shape_1 = new cjs.Shape();
Yeah but you can't use the font dynamically, which was my point.  (Unless you built some sort of font mapping system)
Share on other sites
somnamblst    200 Likes (Specialist)
Posted February 22, 2017
Yeah I realized that after I commented. Have you done any dynamic ads that use geo location? Pre HTML5,  Doubleclick was doing the dynamic geo location versioning as a value added perk. That was discontinued when the HTML5 switch happened.
I have a copy of what was called the Golden Feed spreadsheet. It served different logos and clicked through to different URLs based on a user's location.
Share on other sites
greensock@droga5.com    0 Likes (Newbie)
Posted February 23, 2017
@Davi - nice list of pros/cons for hand-coded vs. Animate CC. I'm going to share that with our team here.
Couldn't agree more on masking and complex animations (think "organic" movement that requires lots of subtle tweaking) - it's just so much faster when you can visually adjust it in realtime. For example, I made this in Animate; I don't think I could even mimic that animation using GSAP Custom Ease, which wasn't available at the time.
Some of the issues I had with Animate were things like:
some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)
remembering to check/uncheck the "overwrite html on publish" button at various points during the workflow
the very crappy built-in code editor
I tried to follow Cory Hudson's tutorial for setting up templates, but it just got messy, and I abandoned it partway through. I might have to take a crack at that again.
Share on other sites
davi    141 Likes (Specialist)
Posted February 23, 2017
I don't use sprite sheets that Animate CC exports, but do create my own with Texture Packer if the need arises (like using a short video clip in a standard banner). I just use images and keep 'Export Images' checked, and when I'm all done, uncheck it and replace all of the images with the optimized versions that I manually optimize using other apps like ImageAlpha and ImageOptim, PS, etc. If I go over the http request limit, I'll start spritesheeting things.
I don't even use their exported HTML files, made my own template with other misc things and utils added.
Heh, yeah the code editor can use some work, especially selecting like Sublime.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted February 23, 2017
I tried to follow Cory Hudson's tutorial for setting up templates, but it just got messy, and I abandoned it partway through. I might have to take a crack at that again.
I have a set of publish templates for every size. I gave up on Cory Hudson's ad helper stuff. My templates just add the click tag stuff for DCM, and resize to 1X since bitmaps created at 2X are how I deal with high DPI displays*
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 23, 2017
For example, I made this in Animate;
Popular bug in Chrome and interesting bug in Firefox with WATCH NOW button.
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 23, 2017
Interesting article for everyone who care about DPI http://sebastien-gabriel.com/designers-guide-to-dpi/
Share on other sites
somnamblst    200 Likes (Specialist)
Posted February 23, 2017
some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)
Unfortunately sprite sheets are the default publish option. when I accidentally generate them, I have never been impressed with the resulting file size, even though it does reduce server requests. But because I design in Animate, including creating storyboards from my Animate file, it is rare for me to have more than two bitmaps (sometimes none), and i just Tiny PNG them. So my server requests are like 5 including createjs.
As to number of ads created in two days, I suspect I may have a record.  Using Animate I knocked out 308 banners. That was four versions, x 8 sizes,  x 11 different logos.
Share on other sites
greensock@droga5.com    0 Likes (Newbie)
Posted February 23, 2017
Unfortunately sprite sheets are the default publish option. when I accidentally generate them, I have never been impressed with the resulting file size, even though it does reduce server requests. But because I design in Animate, including creating storyboards from my Animate file, it is rare for me to have more than two bitmaps (sometimes none), and i just Tiny PNG them. So my server requests are like 5 including createjs.
As to number of ads created in two days, I suspect I may have a record.  Using Animate I knocked out 308 banners. That was four versions, x 8 sizes,  x 11 different logos.
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 24, 2017
some ad servers don't accept sprite sheets being referenced with JSON objects, which Animate generates (I think they changed this in 2017?)
Now is the safe to use sprite sheets because now is all in JS, not more JSON.
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 24, 2017
For me, for now, there are only two things which I dont like in work with Animate CC.
1. CANVAS (Animate CC) vs DOM (Edge Animate).
For now, Canvas tecnology is not full ready for overall audience. Canvas animations are slow on 2/3 overall computers.
Computers of designer and developers are more stronger than computers of ordinary users of web.
We must wait few years for stronger overall computers.
2. Easing functions which exist in CreateJS are still not adopted in GUI of Animate CC for classic tweens.
We need something like this
Share on other sites
davi    141 Likes (Specialist)
Posted February 24, 2017
- I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions. Worth every cent. It allows you to save Custom Eases and apply them with the click of a button, even on multiple tweens simultaneously. What I've done is recreate all of GSAPs eases and my own and have a library of them. I've also recreated some of the eases from a tool I use for After Effects called Flow, which also has user libraries for custom eases. Super handy tool and saves a ton of time. You can even export the eases to share with others.
You can find it in Adobe Create Cloud and install from there too
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 24, 2017
- I use a tool called Ease Caddy made by Justin Putney over at Ajar Productions.
Yes I know, I am using that plugin, I have my custom XML file with almost all eases for that plugin, I am using free version then I am importing my XML. http://www.marjantrajkovski.com/html5-banners-templates/myEases.xml
1. Eases are not optimised, they are not functions, in final code you dont have e.g.
Most important for me, values can not be in minus and plus and then you can not create type of eases like Back and Elastic.
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 24, 2017
It will be nice to have some kind of Greensock Ease plugin for Classic tween in Animate CC
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted February 24, 2017
I do that all the time? So Yes.
If you can hand code this type http://www.marjantrajkovski.com/test2/ of 10 banner sizes for one work day than you are expert and I can only congratulate to you
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted May 21, 2017
Great news!!! In new prerelease of new release Animate CC - EASE TYPE.
Share on other sites
davi    141 Likes (Specialist)
Posted May 30, 2017
Animate CC + GSAP + DepthJS = 3D in AnimateCC!!! (Well, 2.5D)
Found this handy lil' library from MBMedia.cc called DepthJS which is a 2.5D Engine for CreateJS.
Works and plays wonderfully with GSAP and Animate CC. You can now do 2.5D animations in Animate CC
Here's a proof of concept animation I made (GSAP, totally stole your logo to use as an example) >
Super easy to use too, just follow this >
- Include GSAP and the DepthJS libraries (I did it via the Global > + Include script method in Animate 2017).
- Create Stage3D instance
- Add Stage3D to CreateJS stage (Animate CC's default stage is called "stage").
- Make some graphics in Animate CC (vectors, bitmaps, and what not, etc etc).
- You need to add a LinkageID for those graphics. However, it's not like the old Flash days in the Properties Inspector, but just as easy. Just go to the Library panel, and under the column for Linkage, double-click the blank area to the right and then type in a linkage ID.
- For graphics in the library, use the Container3D class. Create a new instance of that.
- Add the graphics that you assigned a linkage ID to, to the Container3D class.
- Add the Container3D instance to the Stage3D instance.
- Do GSAP like you normally do but follow the DepthJS docs for properties to animate.
Here's some code for the example above >
Share on other sites
Page 2 of 3
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 8
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Animate CC vs hand coding
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.