Skip to content
Animation made with After Effects and Bodymovin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
.gitattributes
LICENSE
README.md
lottie.js
ufo-blind.gif
ufo.json

README.md

Uf-HYP

Uf-HYP is a loading animation made with After Effects integrated in the Web-app HYP

How To Bake An Animation:

  • First Step

First of all we need After Effects (a.k.a AF) and the increbile, magnificent "BODYMOVIN" to bake our (presumably) fantastic animation.
NOW!...Open AF and create your composition (I've created all the component with Illustrator)

step1

  • Second Step

Go in "Window" - "Extantion" and select "Bodymovin".
After that select your composition, choose a destination folder and in the settings check "Glyphs" and "Demo" (if you want have in HTML preview). Now it's time to press the RENDER button!

step2

Now that we got our "data.json" file, we need the "player" for our animation.
  • Third Step

Press the "Get The Player" button on Bodymovin and press it again in the next step.

step3

AAAAND NOW....the player is in our hand!
This step allow you to create a "lottie.js" file.
  • Fourth Step

All the ingredients are now ready to get prepared for final (and maybe "hard") part of the recipe.
Open your Index.html and create a script putting the .js file(nominated now "bodymovin.js") inside, and a div with a id named "bm".

step4

  • Final Step

Last but not least, in the "index.js" we got write a variable for our animation and, in the path, type the name of your .json file.

step5

  • HABEMUS ANIMATION!

animation

Our animation is now complete! Now pat your shoulder, drink some Redbull and.....GO BACK AGAIN IN THE ANIMATION WORLD!
You can’t perform that action at this time.