BODY

MOVIN’

#BodyMovin’ is the animation tool for modern sites.

It works translating professional After Effects animations to web animation enhancing the user experience over components such as banners, buttons, infographics, transitions and typography amongst others.

And best of all: keeps animation responsive, in high definition and cross devices!

#BodyMovin’ es la herramienta de animación perfecta para los sitios actuales.

Traduce animación profesional de After Effects a animación web para mejorar la experiencia al usuario sobre componentes tales como banners, botones, infografías, transiciones y tipografía entre otros.

Y lo mejor de todo: mantiene la animación adaptable, en alta definición y sobre todos los dispositivos.

The animation tool for modern sites.
#BodyMovin’ brings professional motion to the web.

WHY WE MADE IT

We’ve created bodymovin’ based on the needs we have today with our colleagues and customers.

Our philosophy is to accompany our customers to innovate based on their needs. Today our designers and programmers needed a tool that can represent the reality of the designs created for any graphical interface, digital advertising or UI components. thus ensuring an ideal result.

¿POR QUÉ LO HICIMOS?

Creamos bodymovin’ basados en las necesidades que tenemos hoy en día con nuestros colegas y clientes.

Nuestra filosofía es la de acompañar a nuestros clientes para innovar basados en sus necesidades. En estos momentos nuestros diseñadores y programadores necesitan una herramienta que represente la realidad del diseño creado para cualquier interfaz gráfica, publicidad digital o componentes UI, asegurando así un resultado ideal.

See the Pen Bacon Pancakes by kittons (@airnan) on CodePen.

Click on Jake to get your unique pancake.
This animation is exported from After Effects with Bodymovin. The animation is partly based on the great Kurt Snyder.

See the Pen Shapes recolored by kittons (@airnan) on CodePen.

Play around with the color pickers to change the animation colors.
Experimenting with exporting from AE with associated classes to modify default colors.

See the Pen Franchise - Animography Text Editor by kittons (@airnan) on CodePen.

Have fun tapping on your keyboard. Each character is an svg. Each animated with js. Adjust colors, tracking, and more on the options panel in the top right. Don’t miss the uppercase version of each char!

See the Pen SVG Animated icons by kittons (@airnan) on CodePen.

A series of animated svg icons we did for a contest on Codecanyon. They have an optional hover effect and you can edit the colours of the palette with css by changing the 4 “bm_color_” selectors CSS classes were directly set and exported from After Effects.

See the Pen A christmas loop in svg by kittons (@airnan) on CodePen.

This is an After Effects animation from the amazing Gabriel H Fermanelli. It’s an ID for FOX.

See the Pen murally by kittons (@airnan) on CodePen.

Masking strokes

See the Pen to loop a loop by kittons (@airnan) on CodePen.

See the Pen animated form validation by kittons (@airnan) on CodePen.

This is an animated version of the google login form. It simulates an email validation: regardless of what you input it will display the invalid animation. Notice that the keypress event writing on the input triggers different animations if the cursor is before or after the @ sign.

These friends used BodyMovin’ on their projects:

Press Releases:

“bodymovin goes native thanks to the Airbnb design rock team”

http://airbnb.design/introducing-lottie/

Medium: “The following are the possible ways to create professional animations in SVG:..”

https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec#.pzes0bokc

“Bodymovin: un plugin qui transforme vos animations After Effets en SVG + JS “

https://www.jonathan-menet.fr/blog/2015/07/31/bodymovin-un-plugin-qui-transforme-vos-animations-after-effets-en-svg-js/

Other interesting related articles: