{"id":13715003,"url":"https://github.com/72/lottie-framer","last_synced_at":"2025-05-07T03:31:08.097Z","repository":{"id":69857271,"uuid":"91219841","full_name":"72/lottie-framer","owner":"72","description":"A Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files)","archived":false,"fork":false,"pushed_at":"2018-01-17T13:01:49.000Z","size":7,"stargazers_count":168,"open_issues_count":1,"forks_count":7,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-14T03:34:21.997Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/72.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-14T04:25:59.000Z","updated_at":"2024-01-12T14:39:29.000Z","dependencies_parsed_at":"2023-02-25T12:45:46.342Z","dependency_job_id":null,"html_url":"https://github.com/72/lottie-framer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/72%2Flottie-framer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/72%2Flottie-framer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/72%2Flottie-framer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/72%2Flottie-framer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/72","download_url":"https://codeload.github.com/72/lottie-framer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806419,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:52.895Z","updated_at":"2025-05-07T03:31:07.766Z","avatar_url":"https://github.com/72.png","language":"CoffeeScript","funding_links":[],"categories":["Modules","Web"],"sub_categories":["Frontend and UI Components"],"readme":"# Lottie for Framer\nA Framer module that uses AirBnb's Lottie-Web to render animations exported from After Effects (JSON files).\n\n\n# 🚀 [View Demo](https://framer.cloud/lZjXF/)\n\n## Installation\n\n1. Create a new Framer project.\n2. Download and put the file [`LottieLayer.coffee`](https://raw.githubusercontent.com/72/lottie-framer/master/LottieLayer.coffee) in your modules folder.\n3. *Recommended:* Download the [`lottie.min.js`](https://raw.githubusercontent.com/airbnb/lottie-web/master/build/player/lottie.min.js) library and put it in your modules folder.\n4. Add this line at the top of your Framer document.\n```coffeescript\n{LottieLayer} = require 'LottieLayer'\n```\n\n\n## How to use\n\nCreate a new instance of this module.\n```coffeescript\ncustomAnim = new LottieLayer\n\tname: \"customAnim\"\n\tpath: \"images/animation.json\"\n```\nThat's it! This creates an element bundled with all the goodies of a Framer Layer **and** the methods of a lottie-web animation instance.\n\n\n### Customization\n\n```coffeescript\ncustomAnim = new LottieLayer\n\tname: \"customAnim\"\n\tpath: \"images/animation.json\"\n\tautoplay: true\n\tloop: true\n\tspeed: 1\n\tdirection: 1\n```\n\n- `name` *String* **Required** : Sets the name of the instance. Each instance must have a different name.\n- `path` *String* **Required** : Sets the path to your JSON file.\n- `autoplay` *Boolean* : Whether or not to autoplay the animation once it's loaded. Defaults to true.\n- `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.\n- `speed` *Number* : Sets the speed of the animation. 1 is normal speed. 2 is double the speed and so on. Defaults to 1.\n- `direction` *Number* : Sets the direction of the animation. 1 will play the animation forward. -1 will play the animation backwards. Defaults to 1.\n\n\n### Methods\n\n**.play()**\n\n**.pause()**\n\n**.stop()**\n\nThe animation needs to be loaded in the DOM before running these 3 methods:\n\n**.goToAndStop( _frame_ )**\n\n**.goToAndPlay( _frame_ )**\n\n**.playSegments([ _fromFrame_, _toFrame_ ])**\n\n\n### Events\n\nExamples of available events:\n\n```coffeescript\ncustomAnim.onComplete -\u003e\n\tprint 'Completed.'\n\t#Do something else\n```\n\n```coffeescript\ncustomAnim.on \"change:speed\", -\u003e\n\tprint 'Speed changed to: ' + customAnim.speed\n\t#Do something else\n```\n\n```coffeescript\ncustomAnim.on \"change:direction\", -\u003e\n\tprint 'Direction changed to: ' + customAnim.direction\n\t#Do something else\n```\n\n## Notes\n\nDownload lottie-web-ready animations.\n- [Lottie Files](http://www.lottiefiles.com/)\n\nLearn more about Bodymovin \u0026 Lottie-Web.\n- [Lottie-web official repo](https://github.com/airbnb/lottie-web)\n- [Bodymovin installation guide by Valentina Berois](https://medium.com/@vberois/lottie-after-effects-591913cb004c)\n\nThanks to Hernan Torrisi for the amazing work on the bodymovin plugin and to @mhotovec, @slykuiper and @MVHarvey for their animations used in the demo.\n\n## Contact\n[@72mena](http://twitter.com/72mena)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F72%2Flottie-framer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F72%2Flottie-framer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F72%2Flottie-framer/lists"}