Awesome

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.coffee in your modules folder.
Recommended: Download the lottie.min.js library 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

name String Required : Sets the name of the instance. Each instance must have a different name.
path String Required : Sets the path to your JSON file.
autoplay Boolean : Whether or not to autoplay the animation once it's loaded. Defaults to true.
loop Boolean or Number : Whether or not to loop the animation. If you pass a number, the animation will loop that many times. Defaults to true.
speed Number : Sets the speed of the animation. 1 is normal speed. 2 is double the speed and so on. Defaults to 1.
direction Number : 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.

Lottie Files

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.

Contact

@72mena