Lottie for Framer

A Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files).

🚀 View Demo

Installation

1. Create a new Framer project.
2. Download and put the file LottieLayer.coffee in your modules folder.
3. Recommended: Download the lottie.min.js library and put it in your modules folder.
4. 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.

• Lottie-web official repo
• Bodymovin installation guide by Valentina Berois

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