Animation on the web - our tools at a glance

Around 30 years after my first attempts at animation - flipbooks on the post-it pads in my father's office - a lot has happened in terms of animation: Hand-drawn bouncing dots have given way to complex interactive vector graphics in 60 frames per second. And since we at smartive attach great importance to both attractive user interfaces and exciting content, we love animations and use them whenever it makes sense. Be it as a video, animated graphic or as an interactive element.

Below I give a brief overview of the tools we use, their advantages and disadvantages and possible alternatives.

Keyshape - Simply simple

Anyone who understands the principle of keyframes understands Keyshape and can create SVG animations with little effort. The parameters to be animated are of course more or less limited to those that are also possible with CSS Transform Properties can be implemented - especially as it also exports them in this way. For rudimentary interactions (on Click, on Pointer Enter and on scroll into view), Keyshape also offers its own small Javascript library. Despite or perhaps because it is such a simple program, we use it from time to time at smartive.

Alternatives: SVGator, SVGartistaCSS animations

Price: one-off CHF 29.- via Appstore

Pro

• favorable
• easy to learn
• amazingly powerful export function
• SVGs work almost everywhere
• Symbols/Components Feature

Contra

• Restrictions due to SVG format
• for Mac only

Rive - The New Kid on the Web

Rive (formerly Flare) has been around for a few years, but a few months ago it did a tabula rasa with its codebase and redeveloped everything from scratch (The new Rive). Since then, some rather banal functions such as layer effects or a curve editor have been missing, but Rive now scores with simple implementation in almost all code environments and very, very small file sizes. Alongside the fantastic state machines - a visual editor for logic and interactions - this is of course one of the main reasons why we (and Duolingo) have recently been relying almost exclusively on Rive.

Alternatives: After Effects with Lottie Export, Cavalry with Lottie Export

Price: CHF 13 per month, Free Plan with a maximum of 3 files

Pro

• Interactions and states can be created by the designer
• layered animations
• State Machines
• Multiplayer
• runs in the browser
• Very high performance with small file sizes

Contra

• Many basics are still missing (e.g. effects, curve editor)
• Sometimes rather unintuitive UX (e.g. bones/rigging, target selection)
• Mesh deformer for raster graphics only

Cavalry - The Disruptor

Cavalry is considered by many to be the first serious competitor to Adobe's After Effects. Even though for professional Compositing and VFX many features are still missing, motion graphic designers should get the tool from the small development team Scenegroup in more detail. Many parametric design and animation options, a simple physics engine and, after a few attempts, the very exciting driver/driven principle in which, in very simplified terms, each numerical value can control another. For example, a percentage slider can control both the opacity of an object and its x-coordinate, saving two keyframes. And with the integrated Lottie export, (simple) animations can also be quickly and reasonably performant on the web.

Alternatives: After Effects, DaVinci Resolve Fusion, Apple Motion

Price: ± CHF 18 per month, Free Plan with limited functionality

Pro

• Parametric animations possible (with few/without keyframes)
• Automation, data import, batch processing, batch export, etc.
• rudimentary physics engine
• Exciting driver/driven principle
• Lottie Export
• Script option in Javascript

Contra

• relatively expensive
• Steep learning curve
• User interface so-so, moderate user experience

Framer (Motion) - Pretty easy easing

What started out as an (almost) purely code-based prototyping tool and then blossomed into a Figma-style design tool has now become an outstanding Sitebuilder has become. In addition to numerous core functions, Framer also offers rudimentary options for animations. This is in the form of state-based transitions. In other words: you design state 1 and state 2 and Framer then tries to interpolate between the two states as elegantly as possible. In principle like Figma's Smart Animate, but in contrast Framer writes usable code based on its free Framer Motion Library - which can (usually) be integrated directly into a web project without any problems.

Alternatives: Motion.dev, Principle (more or less)

Price: CHF 0-35.- per month (Framer Sites), Open Source (Motion Library)

Pro

• Very simple principle
• nice easing by default
• Intelligent interpolation
• Very high performance
• Convenient solution for devs without designers/animators

Contra

• No timeline
• not really an animation tool
• few export options (e.g. to gif or video)

Spline is a very intuitive, browser-based 3D editor with multiplayer and real time rendering. I've been pretty impressed with it ever since the first beta version was released less than a year ago. Since then, the following have been added: Game Controls, Physic Engine, States, Components, Video and AI Shaders, Cloners, Conditional Logics and much more. Given the speed and quality, Spline could become the de facto standard for 3D in the browser. Or Adobe could buy it up. 🙄

Alternatives: Vectary, WebGLStudio

Price: ± CHF 9.- per month, Free Plan with watermark

Pro

• runs in the browser
• very intuitive
• rudimentary physics engine
• Very dedicated developers
• Constantly new (good) features

Contra

• No keyframing (state-based only)
• None (yet) LODs for more complex scenes

Honorable Mention: Cinema 4D

It may be a little out of line here, but Cinema 4D has been with me for over 20 years and is always my first choice for complex animations. Of course, you can't use it to create small UI animations, but for spectacular content or for assets for further use in, for example, a movie, it's the best choice. ThreeJS there is hardly anything better. And the "mindset" of Cinema 4D with its parametric approaches, the non-destructive workflow, the different (mathematical) noises and the targeted randomness has had a lasting impact on my understanding of design and still influences new tools today.

Alternatives: Blender, 3ds Max

Price: ± CHF 1,000 per year

Pro

• Parametric animations
• Simulations
• Complex physics engine
• excellent modeling tools
• large community

Contra

• very expensive
• Very steep learning curve
• only indirectly suitable for the web

Bonus: Procreate

Can you draw and don't care about file sizes? Procreate, one of the best iPad apps for artists and illustrators, also offers rudimentary animation functions. This allows you to create movements in the style of old cartoons (or flipbooks ❤) using onion-skinning Draw and animate frame by frame and then export as a gif or video.

Alternatives: Animation Desk

Price: one-time CHF 13.- via Appstore

Pro

• easy to understand
• "haptic" look
• Generally very good app

Contra

• large files (on the web)
• very complex
• No timeline

Conclusion - No tool to rule them all

• Just like the choice of programming language or framework, the choice of animation software also depends heavily on the project in question and it is worth clarifying a few questions in advance: What are the devices and environments to be supported? How much leeway does the project budget allow? Are there any restrictive brand specifications? Is the look more technical or organic? Are the animations data-driven? Are there only vector or raster graphics that need to be animated? Does the animation have to be interactive? Answering questions like these before starting a project (and having a brief exchange with developers) can save you a lot of unnecessary effort and frustration. And animations should first and foremost be fun! 😌