Web Animation

Web Animation



#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!

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



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 need a tool that represents the reality of the designs created for any graphical interface, digital advertising, or UI components, thus ensuring an ideal result.

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.
Here we are 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 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 colors 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”


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


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


no responses
Marketing Campaigns

Marketing Campaigns



Printed graphics, brochures, eflyers, pull up banners, and promotional content for specific campaigns.



no responses
Responsive Design

Responsive Design



We accompanied Nearpod US Startup from the very beginning achieving a memorable identity from where many products converge, all of them challenge rising for Silicon Valley Standards.


no responses