lottie-framer

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

  • 所有者: 72/lottie-framer
  • 平台:
  • 許可證:
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

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

主要指標

概覽
名稱與所有者72/lottie-framer
主編程語言CoffeeScript
編程語言CoffeeScript (語言數: 1)
平台
許可證
所有者活动
創建於2017-05-14 04:25:59
推送於2018-01-17 13:01:49
最后一次提交2017-11-14 22:32:15
發布數0
用户参与
星數168
關注者數10
派生數7
提交數10
已啟用問題?
問題數2
打開的問題數0
拉請求數1
打開的拉請求數1
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?