5

What do you use to develop animated elements for your websites? (CSS-only, Adobe Animate, Bodymovin'?)

over 4 years ago from , York University

I'm looking to create some animations for a website I'm working on. I'm relatively proficient in building custom theme sites on WordPress, but "interactive" style sites are tricky for me, as I only have basic knowledge of CSS transitions and transforms, and zero knowledge of more complex animations, such as those offered by SnapSVG, Bodymovin and other libraries.

I'm interested in trying Adobe Animate CC to create simple animated diagrams and export to HTML5. I would create my SVGs using Vectr, and then hopefully import them into Animate CC and go from there.

Is this an OK approach? Would like to hear what other people's workflows are when they're building web animations. Thanks!

11 comments

  • Mike AbbotMike Abbot, over 4 years ago

    After effects with Lottie.

    3 points
    • JE LS, over 4 years ago

      Hype is great, Lottie I have to use it, looks great and I have code experience as well so seems a natural to me!

      0 points
  • Aaron SagrayAaron Sagray, over 4 years ago

    Hype is pretty great for what you're describing as complex animations.

    Transitions between pages is a different beast. The CSS is straightforward, but the javascript is very framework dependent. This is a good overview of the challenge and the options out there for static content.

    3 points
    • Personable Man, over 4 years ago

      Hadn't heard of Hype. I'll check it out, as I would prefer a one-time payment as opposed to Adobe's subscription model, which I'd rather do without.

      1 point
  • Tyson KingsburyTyson Kingsbury, over 4 years ago

    sounds like you're in the exact same use-case as I was... I whole-heartedly endorse using SVgator.

    I had only minimal experience doing time-line animations etc, but have used the one in photoshop to some extent, as well as Flash and other to a very limited degree...

    I'd wanted to add some little animations into our website, and had seen some other SaaS companies doing some really nice SVG animation etc..

    I found SVGator... and it was perfect for us. couldn't be easier to use, you can copy the code straight into Wordpress... works like a charm...

    https://www.svgator.com/

    2 points
  • Josh Sanders, over 4 years ago

    if you have a basic understanding of javascript, I'd suggest looking into anime.js . Powerful library and fairly small learning curve.

    2 points
    • Personable Man, over 4 years ago

      I have briefly read about anime.js; I'll review their examples showcase and sample code to see if it's within my skillset. I've also read good things about p5.js, but haven't tried it yet.

      0 points
  • Riscovo Vescovo, almost 4 years ago

    Update on my previous comment, this could be of your interest: it is about using Adobe Animate with Bodymovin and Lottie -> https://github.com/airbnb/lottie-web/issues/1604

    0 points
  • Riscovo Vescovo, almost 4 years ago

    I tried a bit of everything. So far Adobe Animate is by far the best Animation tool for interactive animation and for data driven animation, both for mobile and for desktop Apps and games, And for much more than that. After Effects is not designed for that. But if you need to do a simple linear animation, then After Effects is ok, just forget about the effects that are available in After Effects, 99.9% of them are not compatible when exporting in code for an App.

    0 points
  • Peter HaPeter Ha, over 4 years ago

    My process depends on what I'm trying to achieve with animations for the web. If there is no interactivity and if I can create it as GIF, then I would create my assets in Illustrator and then import it into After Effects to animate.

    I haven't used Spirit for a project yet but did play around with it when it first launched. Pretty cool tool since you can use a timeline editor to create your animations and see it live on the site.

    But it sounds like you're working with diagrams.If you're diagrams are interactive, then this Javascript library might be worth looking into d3js.org.

    0 points
  • Marcel M., over 4 years ago

    Personal experience:

    1. Use a simple timeline-based animation tool like After Effects, Haiku(?), Protopie (or whatever) to nail your animation timing and transitions.

    2. When you're satisfied with the outcome switch over to the more complex tools for actual html+css coding.

    0 points