@@ -10,3 +10,132 @@ You can deploy this in three clicks:
1010 ![ ] ( 2018-09-02-22-20-24.png )
1111
1212Your site should be reachable at ` https://<Username>.github.io/html-css-only `
13+
14+
15+
16+ ![ ] ( docs/lottie.gif )
17+ ## Adding bodymovin animations to a webpage
18+
19+ We will be adding bodymovin animations to this simple portfolio site
20+
21+ ### Setting up
22+
23+ 1 . Fork the repo on Github
24+ 
25+ 2 . Clone the repo so you can edit things locally
26+ 3 . Open up ` index.html ` in a web browser, you can refresh that page to see changes you made locally
27+
28+
29+ ### Pick an animation
30+
31+ 1 . go to [ lottiefiles.com] ( lottiefile.com ) and pick out an animation
32+ 2 . download it, and copy the ` .json ` file into the ` assets ` folder as ` my-animation.json `
33+
34+ ### Load in the animation
35+
36+ 1 . Get the bodymovin library on your webpage.
37+
38+ Edit ` index.html ` , insert this ` <script/> ` tag inside the ` <head> ` tag:
39+
40+ ``` html
41+ <script src =" https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js" script >
42+ ```
43+
44+ ** for example** :
45+ ``` html
46+ ...
47+ <head >
48+ <meta charset =" UTF-8"
49+ <meta name =" viewport" content =" width=device-width, initial-scale=1.0"
50+ <meta http-equiv =" X-UA-Compatible" content =" ie=edge"
51+ <link rel =" stylesheet" href =" assets/css/main.css"
52+ <script src =" https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js" script >
53+ <title >My site</title >
54+ </head >
55+ ...
56+
57+ ```
58+
59+ This ` script ` automatically runs when the page loads. It fetches the ` bodymovin ` library from a CDN, and sets the global propery ` bodymovin ` .
60+
61+ Now if you open up the devtool in chrome, for example, you should see ` bodymovin ` as a variable:
62+
63+ ![ ] ( 2018-09-04-20-31-41.png )
64+
65+ 2 . Now we can create an empty ` <div/> ` element, for our animation, and give it an ` id="to-animate" ` :
66+
67+ ``` html
68+ <div id =" to-animate"
69+ ```
70+
71+ ** for example, you can place it right on the front page!** :
72+ ``` html
73+ <header id =" header" class =" alt"
74+ <div class =" inner"
75+ <div id =" to-animate"
76+ <h1 >Hello World</h1 >
77+ <p >There's nothing here yet...</p >
78+ </div >
79+ </header >
80+ ```
81+
82+
83+ 3 . Now add a ` <script> ` tag just before the closing ` </body> ` tag.
84+
85+ We will initialize our animation here:
86+
87+ ``` html
88+ ...
89+ <script >
90+
91+ // your code goes here
92+
93+ script >
94+ </body >
95+ ```
96+
97+
98+
99+ 4 . Now we initialize the animation:
100+
101+ ``` html
102+ ...
103+ <script >
104+
105+ // your code goes here
106+
107+ let animation = bodymovin .loadAnimation ({
108+ container: document .getElementById (' to-animate'
109+ renderer: ' svg'
110+ loop: true ,
111+ autoplay: true ,
112+ path: ' assets/my-animation.json'
113+ })
114+
115+ script >
116+ </body >
117+ ```
118+
119+ Here, we tell ` bodymovin ` to render as 'svg', to loop infinitely, and to autoplay when the page loads.
120+
121+ 5 . Style your animation
122+
123+ You can use ` CSS ` to size and position your animation. Here I've inserted a ` <style> ` tag, right after the opening ` <body> ` tag:
124+
125+ ``` css
126+ <style >
127+
128+ #to-animate {
129+ max-width 10em ;
130+ display inline-block ;
131+ }
132+
133+ </style >
134+ ```
135+
136+ 6. Go forth and try out some more stuff
137+
138+ [bodymovin Documentation ](https://github.com/airbnb/lottie-web #usage )
139+
140+
141+ [View demos (with source code) on Copepin ](https://codepen.io/collection/nVYWZR/)
0 commit comments