![behance iframe html code behance iframe html code](https://www.pierre-giraud.com/wp-content/uploads/2019/05/youtube-integration-iframe-1.png)
Lottie is hands down the most efficient way to include animations on web pages. Much better! You’ve officially learned how to embed Lottie animations into HTML, easy right? Final Thoughts Go ahead and check it out in your browser. You can see the changes in the in-line CSS “style” line above. Also, the icon is a bit close to the text it needs some room to breathe. We’ve decided that 100px is a bit too small, so we’re going to double the size. While you won’t be able to adjust the color after clicking “Embed” in the Creattie library, you can still change the animation style directly in HTML.
![behance iframe html code behance iframe html code](https://i.pinimg.com/originals/1e/fe/ff/1efefff7e20c6c70f0bb5f38dac14609.png)
The icon looks pretty good, but we want to make some quick changes.
![behance iframe html code behance iframe html code](https://mir-s3-cdn-cf.behance.net/project_modules/fs/4843c7113385033.6029b3768bcdd.png)
If the code looks right, go ahead and open it up. You could also add to the line to include a border, padding, or other customizations. The code snippet also features in-line CSS so you can quickly adjust the size of the icon and background. While it only takes a few seconds to go back into Creattie to make changes, most designers appreciate the option to tweak the delay, speed, frame rate, and stroke width in HTML. You’ll notice the changes we’ve made to the animated icon are visible in the HTML we just pasted in, making them incredibly easy to adjust directly from your code editor. Simply paste the code snippet where you want your animated icon and clean up the code if necessary. The icon needs to go in between our H1 and H3 tags. We are just using a basic Bootstrap template with a couple of headings for the tutorial. The first step is to open your coding editor we use VS Code in this example. Now you are ready to get into your webpage’s code and embed the Lottie animation. We also changed the trigger to “Loop on Hover” so it looks static until the user interacts with the icon on the page.Īfter your icon is customized to your liking (don’t worry, if you aren’t 100% sure, these changes are easy to make in the code or back on Creattie), copy the code by clicking “Copy” or copy and pasting the entire snippet. We’ve decided to use the animation as a smaller icon, so we’ve lowered the size to 100px. Click Embed Lottie AnimationĪ pop-up will appear with more customization options and the code that will go into your HTML file. The speed is a little fast for what we are going for today, so we’ve decreased it to 50% and lowered the frame rate to 30 fps. Simply increase or decrease the number with the plus and minus icons. Next, we decided to increase the stroke width to 25px. You can also paste the HTML color code to match other elements on your webpage. We choose a dark shade of purple in the color picker tool. Other more complex designs use more colors and have more than two color palettes to choose from. The Strategy Icon is relatively simple, using only two colors. We’re going to switch up the default colors a little bit to capture a different aesthetic. CustomizeĬreattie offers customization capabilities directly within the user interface.
![behance iframe html code behance iframe html code](https://i.stack.imgur.com/XzJ2E.png)
Today we’re going to use the Strategy Icon as an example. You will now see an assortment of high-quality Lottie animated icons 100% free to use. Once you are on, hover over to the Lottie dropdown in the top menu and click “Animated Icons.” While hundreds of premium icons are available free on Creattie, there are also paid, incredibly affordable options. For the purpose of the tutorial, we will use a free animated icon as an example.