How to bring a product to life with SVG animations

Using Lottie’s free animated illustrations

Image for post
Image for post
Star from LottieFiles
Image for post
Image for post
Photo by Marius Masalar on Unsplash

There are two ways to go about acquiring animations for your website.

var animation = bodymovin.loadAnimation({container: document.getElementById('deliveryAnimation'),

// Set your ID to something that you'll associate with the animation you're using //
renderer: 'svg',loop: true,autoplay: true,path: 'delivery_van.json'

// Make sure your path has the same filename as your animated SVG's JSON file //
})
<head>  <script src="lottie.js"></script></head>
<section>  <div id="deliveryAnimation"></div>  <script src="delivery.js"></script></section>
Image for post
Image for post

Co-Founder @ confettihabits.com & Senior Product Designer @ Skookum — Dannysapio.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store