Web Animation
19/10/16

Web Animation

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!

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 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”

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/

no responses
Marketing Campaigns
18/10/16

Marketing Campaigns

MARKETING
CAMPAIGNS

 

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

NEARPOD

UIA
21 CONFERENCIA INDUSTRIAL

no responses
Eucalis
23/09/15

Eucalis

EUCALIS
PROJECT

 
We bring a different and personal approach to each project we work on. That’s why our clients keep trusting us.

no responses
Faiga
14/09/15

Faiga

FAIGA

 

Our goal is to help our clients to communicate in the most efficient way. The process of updating the client’s ID implies that we undestand both the client and the user, and enhance the communication between them.

no responses
Responsive Design
09/09/15

Responsive Design

RESPONSIVE
WEB 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.

SPECIAL
CAMPAINGS

no responses
DISNEY MAGIC RUN
19/08/15

DISNEY MAGIC RUN

DISNEY
MAGIC RUN

 

We develop product pieces applying existing brand identity, no matter if the project is small, big or custom. We always make sure everything is correctly implemented, in addition to adding value to UI/UX cases.

no responses
Branding
19/08/15

Branding

BRAND
MANUAL

 

We develop product pieces applying existing brand identity, no matter if the project is small, big or custom. We always make sure everything is correctly implemented, in addition to adding value to UI/UX cases.

LOGO
APPLICATIONS

COLOR
PALETTE

ACCENT
PALETTE

DIGITAL
PIECES

NEWSLETTER

ONE IMAGE EMAIL

ILLUSTRATED EMAIL

ANIMATED EMAIL

DIGITAL
PIECES

BROCHURE

Front

Back

WEB
DESIGN

no responses
Fita
14/07/15

Fita

FITA

 

Associations and foundations have a rich history and are usually lack of a defined brand and updating of their website and Maketing pieces. We manage to accompany them in the process of transformation.

no responses