You can deploy this in three clicks:
- Click fork
- Click Settings
- Enable Github Pages on the "master" branch
Your site should be reachable at https://<Username>.github.io/html-css-only
We will be adding bodymovin animations to this simple portfolio site
- Fork the repo on Github
- Clone the repo so you can edit things locally
- Open up
index.htmlin a web browser, you can refresh that page to see changes you made locally
- go to lottiefiles.com and pick out an animation
- download it, and copy the
.jsonfile into theassetsfolder asmy-animation.json
- Get the bodymovin library on your webpage.
Edit index.html, insert this <script/> tag inside the <head> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script>for example:
... <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="assets/css/main.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script> <title>My site</title> </head> ...This script automatically runs when the page loads. It fetches the bodymovin library from a CDN, and sets the global propery bodymovin.
Now if you open up the devtool in chrome, for example, you should see bodymovin as a variable:
- Now we can create an empty
<div/>element, for our animation, and give it anid="to-animate":
<div id="to-animate"/>for example, you can place it right on the front page!:
<header id="header" class="alt"> <div class="inner"> <div id="to-animate"/> <h1>Hello World</h1> <p>There's nothing here yet...</p> </div> </header>- Now add a
<script>tag just before the closing</body>tag.
We will initialize our animation here:
... <script> // your code goes here </script> </body>- Now we initialize the animation:
... <script> // your code goes here let animation = bodymovin.loadAnimation({ container: document.getElementById('to-animate'), renderer: 'svg', loop: true, autoplay: true, path: 'assets/my-animation.json' }) </script> </body>Here, we tell bodymovin to render as 'svg', to loop infinitely, and to autoplay when the page loads.
- Style your animation
You can use CSS to size and position your animation. Here I've inserted a <style> tag, right after the opening <body> tag:
<style> #to-animate { max-width: 10em; display: inline-block; } </style>- Go forth and try out some more stuff