We prepared something interesting for web developers and designers today! Of course, others can read this material too. For the first time, designers can make beautiful animations without recreating it by hand. Meet Lottie to render Adobe After Effects animations on the web!
Lottie is a mobile library that was created for Web, iOS and exports animations as JSON with Bodymovin on mobile!
Lottie has 8 main methods that are applied to the animations:
lottie.play() – with 1 parameter name to choose a specific animation
lottie.stop() – with 1 parameter name for a specific animation
lottie.setSpeed() – first argument speed
lottie.setDirection() – first argument direction
lottie.searchAnimations() – seraches for elements with class “lottie” or “bodymovin”
lottie.loadAnimation() – returns an animation to control individually.
lottie.destroy() – destroyes and releases resources. The DOM element will be emptied.
lottie.registerAnimation() – allows you to register an element directly. It must have the “data-animation-path” attribute.
lottie.setQuality() — default ‘high’, set ‘high’,’medium’,’low’, or a number > 1 to improve player performance.
The program is easy in installation. You can read the detailed instructions.
You can also read more about mobile-first responsive web design. Nowadays there is no great app without stylish elements and usability!