Lottie for Framer
A Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files).
? View Demo
Installation
- Create a new Framer project.
- Download and put the file
LottieLayer.coffeein your modules folder. - Recommended: Download the
lottie.min.jslibrary and put it in your modules folder. - Add this line at the top of your Framer document.
{LottieLayer} = require 'LottieLayer'
How to use
Create a new instance of this module.
customAnim = new LottieLayer
name: "customAnim"
path: "images/animation.json"
That's it! This creates an element bundled with all the goodies of a Framer Layer and the methods of a lottie-web animation instance.
Customization
customAnim = new LottieLayer
name: "customAnim"
path: "images/animation.json"
autoplay: true
loop: true
speed: 1
direction: 1
nameString Required : Sets the name of the instance. Each instance must have a different name.pathString Required : Sets the path to your JSON file.autoplayBoolean : Whether or not to autoplay the animation once it's loaded. Defaults to true.loopBoolean or Number : Whether or not to loop the animation. If you pass a number, the animation will loop that many times. Defaults to true.speedNumber : Sets the speed of the animation. 1 is normal speed. 2 is double the speed and so on. Defaults to 1.directionNumber : Sets the direction of the animation. 1 will play the animation forward. -1 will play the animation backwards. Defaults to 1.
Methods
.play()
.pause()
.stop()
The animation needs to be loaded in the DOM before running these 3 methods:
.goToAndStop( frame )
.goToAndPlay( frame )
.playSegments([ fromFrame, toFrame ])
Events
Examples of available events:
customAnim.onComplete ->
print 'Completed.'
#Do something else
customAnim.on "change:speed", ->
print 'Speed changed to: ' + customAnim.speed
#Do something else
customAnim.on "change:direction", ->
print 'Direction changed to: ' + customAnim.direction
#Do something else
Notes
Download lottie-web-ready animations.
Learn more about Bodymovin & Lottie-Web.
Thanks to Hernan Torrisi for the amazing work on the bodymovin plugin and to @mhotovec, @slykuiper and @MVHarvey for their animations used in the demo.