A Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files)
Switch branches/tags
Nothing to show
Clone or download

README.md

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.

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