- Last post
- 14 Responses
Handcode + CSS Animation:
- Best for simple stuff. You’ll quickly run into issues in both ability and efficiency when getting into more complex things.
- PROs: Performs nicely, although I’m not entirely sure I notice if it’s faster than GSAP.
- CONs: CSS Animation code just isn’t easily readable when you have a lot going on.
Handcode + GSAP:
- I use this combo about half the time. I have my own template for this.
- PROs: Great and super versatile, plus well-supported. Non-animators can repurpose your files and figure them out. The library via CDN doesn’t get counted. Easier to do banners where you need to easily replace text. Performs well. You can do 2.5D movements. GSAP is good stuff.
- CONs: Obviously, it’s nowhere as fast as a GUI having to type stuff out in code (and I know some hardcore coders will disagree, but trust me, it’s not even remotely close). Your assets are generated from somewhere else. You have to QA a lot, which sucks. Trying to do character animation in just code sucks a big one.
Adobe Animate + Timeline Animation + Canvas:
- PRO’s: It’s got a GUI and has a visual workflow. That's easier than looking at a thousand lines of code. Flash folks are superior familiar already. Vector shit built it. Easy to do masks. It’s possible to do an “animated” alpha mask, can’t do that in the DOM (Yes, this is possible in Animate). The library via CDN doesn’t get counted. You barely need to QA if you have a template in place.
- CONs: Timeline animation can easily get bogged down, this is because of the shitty way the timeline animation gets published (wait.to.wait.to etc etc). No easy way to do 2.5D (there’s a library called DepthJS, but it’s a shitload of work to use). Doesn’t use webfonts like how the DOM can (but you CAN use fonts and do dynamic text in Animate, you just have to use CreateJS to create text programmatically OR layer DOM text on top of the canvas element).
Adobe Animate + GSAP:
What I recommend. I also have built my own template.
- PRO’s: Using Canvas and time-based GSAP performs extremely well, especially when getting into A LOT of objects. You can automate a lot of things. You can build a lot of your assets right in the app and animate them with code. You can mix timeline animation with coded-animation. You can easily do blend modes, masks, etc etc.
- CON’s: You need to have an Adobe account. If you’re passing off files, they need to know how to use the app and GSAP too.
Google Web Designer:
If you’re using Google’s Studio (the old DoubleClick), this is probably great. Everything is all built in and integrates nicely, especially with video. If you’re looking for quick and efficient, this is probably the way to do. I would imagine you’d run into hurdles if you’re trying to do really complex stuff though.
Creatopy / Bannerwise / etc:
I think these would be great for really simple stuff, one framers, low budgets, etc.
CONs: What happens when they no longer are in business? Their code is definitely not editable to normal humans. You can’t passing nothing off to other dev’s.
After Effects / BodyMovin / Lottie:
- PRO’s: Works great for ALL VECTOR stuff. AE is great at manipulating vectors. You can use a separate animator for the project and a dev to implement.
- CONs: Throw some imagery in there and you’ll quickly run into file size issues. Library isn’t allowed on CDN, although there is Lottie Light which is much smaller in file size. No dynamic text, bummer. Good luck trying to edit code.
WHY THE F**K ISN’T THIS BUILT INTO ADOBE!!! Come on Adobe, SVG export should be native and should have happened 15 years ago.
You’re probaby still using Macromedia products.
- This is great. Thank you!!cam28
- + 1OBBTKN
- no Keynote? boo :\
illustrator -> ae+lottie -> coder cleanup works for us. for most of these "tools" it is true that they generate trash output ->sted
- what makes it easy to run into size/resource consuming issues.sted
- Well, that was pretty thorough.CyBrainX
- dear Flash,
missing you again
rest in peaceBeeswax