{"id":13552875,"url":"https://github.com/LottieFiles/lottie-interactivity","last_synced_at":"2025-04-03T04:30:56.649Z","repository":{"id":37111982,"uuid":"255589442","full_name":"LottieFiles/lottie-interactivity","owner":"LottieFiles","description":"A small javascript library to enable interactivity with Lottie animations","archived":false,"fork":false,"pushed_at":"2024-12-28T01:56:53.000Z","size":569,"stargazers_count":440,"open_issues_count":0,"forks_count":56,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-29T23:04:37.321Z","etag":null,"topics":["javascript","lottie-player","lottie-web"],"latest_commit_sha":null,"homepage":"https://lottiefiles.com/interactivity","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-14T11:22:38.000Z","updated_at":"2025-03-25T10:51:23.000Z","dependencies_parsed_at":"2024-01-19T07:09:58.308Z","dependency_job_id":"2ee20b44-edca-4ce1-ad00-5a286d3404de","html_url":"https://github.com/LottieFiles/lottie-interactivity","commit_stats":{"total_commits":143,"total_committers":7,"mean_commits":"20.428571428571427","dds":0.5734265734265734,"last_synced_commit":"a8734621085c3731ad4b49c67b8cd3fd478b5a94"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Flottie-interactivity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Flottie-interactivity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Flottie-interactivity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Flottie-interactivity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/lottie-interactivity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939141,"owners_count":20857916,"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":["javascript","lottie-player","lottie-web"],"created_at":"2024-08-01T12:02:12.366Z","updated_at":"2025-04-03T04:30:56.358Z","avatar_url":"https://github.com/LottieFiles.png","language":"HTML","readme":"# Lottie Interactivity\n\n![npm (scoped)](https://img.shields.io/npm/v/@lottiefiles/lottie-interactivity?style=flat-square)\n![NPM](https://img.shields.io/npm/l/@lottiefiles/lottie-interactivity?style=flat-square)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/lottie-interactivity?style=flat-square)\n\nThis is a small library to add scrolling and cursor interactivity to your Lottie Animations. This can be used with the\n[Lottie Web-Player Component](https://www.lottiefiles.com/web-player) or the\n[Lottie Player](https://github.com/airbnb/lottie-web).\n\n## Documentation\n\nFor full documentation, visit [docs.lottiefiles.com/lottie-interactivity](https://docs.lottiefiles.com/lottie-interactivity/)\n\n\n## Installation\n\n#### via yarn\n\n```\nyarn add @lottiefiles/lottie-interactivity\n```\n\n#### via npm\n\n```\nnpm install --save @lottiefiles/lottie-interactivity\n```\n\n#### via cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js\"\u003e\u003c/script\u003e\n```\n\n## Demo\n\n#### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)\n\n---\n\n## Getting started\n\n#### 1. Import lottie player script to DOM\n\n```javascript\n\u003cscript src=\"https://unpkg.com/@lottiefiles/lottie-player@1/dist/lottie-player.js\"\u003e\u003c/script\u003e // place this in your body element\n```\n\n#### 2. Add a Lottie to html dom with an ID set to the div\n\n```html\n\u003clottie-player\n  id=\"firstLottie\"\n  src=\"https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json\"\n  style=\"width:400px; height: 400px;\"\n\u003e\n\u003c/lottie-player\u003e\n```\n\n#### 3. Setup configuration\n\nThe name of the player ie: 'firstLottie' in this example is the ID set to the lottie web component on the html page.\nConfigration will contain an actions object. This object takes an array named actions which consists of an array of\nobjects. Multiple objects can be added into this array and therefore multiple actions such as \"seek\",\"play\", \"stop\" and\n\"loop\", can be set.\n\nEach object has a start and end which is essentially a percentage for the height of the lottie container and is a value\nbetween 0 and 1. The visibility arrays first value is the start and the second value is the end. This refers to the\npercentage of the viewport.\n\nEnsure that the ending frame is the frame you want the interactivity to end at. This could be the last frame or a frame\nof your choosing. In this case it is set to 100.\n\nConfiguration modes include \"scroll\" where the animation will be synced to the scrolling of the window, \"cursor\"\nwhere the scrolling of the animation will be synced to the cursor position within the container. And \"chain\" allowing you to interact with multiple Lottie animations one after the other.\n\nThe configuration can include a container field as shown in the next example. If a container is not provided the parent\ndiv will be taken as a container.\n\nensure that the interactivity library is imported to the body of your html DOM\n\n```javascript\nLottieInteractivity.create({\n  mode: 'scroll',\n  player: '#firstLottie',\n  actions: [\n    {\n      visibility: [0, 1],\n      type: 'seek',\n      frames: [0, 100],\n    },\n  ],\n});\n```\n\n##### 3.1 React config\n\nThe configuration for the library remains the same for react apps. However usage and initialization is as follows.\nImport the create function from the lottie interactivity library and call the create function. With frameworks like\nreact it is ideal to add an event listener that waits for the lottie player to load before calling the interactivity\nlibrary. An example is as follows for a very basic react class component.\n\n```javascript\nimport React from 'react';\nimport '@lottiefiles/lottie-player';\nimport { create } from '@lottiefiles/lottie-interactivity';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.myRef = React.createRef(); // 1. create a reference for the lottie player\n  }\n  componentDidMount() {\n    // 3. listen for player load. see lottie player repo for other events\n    this.myRef.current.addEventListener('load', function (e) {\n      // 4. configure the interactivity library\n      create({\n        mode: 'scroll',\n        player: '#firstLottie',\n        actions: [\n          {\n            visibility: [0, 1],\n            type: 'seek',\n            frames: [0, 100],\n          },\n        ],\n      });\n    });\n  }\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cdiv style={{ height: '400px' }}\u003e\u003c/div\u003e\n        \u003clottie-player\n          ref={this.myRef} // 2. set the reference for the player\n          id=\"firstLottie\"\n          controls\n          mode=\"normal\"\n          src=\"https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json\"\n          style={{ width: '320px' }}\n        \u003e\u003c/lottie-player\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n##### 3.2 Vue config\n\nThe configuration for the library remains the same for vue apps. However usage and initialization is as follows.\nImport the create function from the lottie interactivity library and call the create function. With frameworks like\nvue it is ideal to add an event listener that waits for the lottie player to load before calling the interactivity\nlibrary. An example is as follows for a very basic vue class component.\n\n```javascript\n\u003ctemplate\u003e\n  \u003c!--  1. Create a lottie player with a reference --\u003e\n  \u003clottie-player id=\"firstLottie\"\n                 ref=\"lottie\"\n                 controls\n                 mode=\"normal\"\n                 src=\"https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json\"\n                 style=\"width: 320px;\"\u003e\n  \u003c/lottie-player\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import '@lottiefiles/lottie-player';\n  import { create } from '@lottiefiles/lottie-interactivity';\n\n  export default {\n  name: 'App',\n\n  mounted() {\n    // 2. listen for player load. See lottie player repo for other events\n    this.$refs.lottie.addEventListener('load', function() {\n      // 3. configure the interactivity library\n      create({\n        mode: 'scroll',\n        player: '#firstLottie',\n        actions: [\n          {\n            visibility: [0, 1],\n            type: 'seek',\n            frames: [0, 100],\n          },\n        ],\n      });\n    })\n  }\n}\n\u003c/script\u003e\n```\n\nLottie-Interactivity has a wide variety of interactions and modes possible, allowing you to easily add interactions to your Lottie animations. For the full documentation on what's possible and how to use this library [click here](https://docs.lottiefiles.com/lottie-interactivity/).\n\n\n\n##### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)\n\n---\n\n## Our other Lottie related libraries\n\n\u003ctable style=\"table-layout:fixed; white-space: nowrap;\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProject\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003c!-- TEMPLATE FOR NEW ROW --\u003e\n  \u003c!-- START ROW\n  \u003ctr\u003e\n    \u003ctd\u003elang\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"\" target=\"_blank\" rel=\"noopener noreferrer\"\u003esupabase-lang\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  END ROW --\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/lottie-player\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elottie-player\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A Web Component for easily embedding and playing Lottie animations and the Lottie-based Telegram Sticker (tgs) animations in websites.\n    \u003c/td\u003e\n  \u003c/tr\u003e  \n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/lottie-react\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elottie-react\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    A React component for the Lottie Web player.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/lottie-vue\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elottie-vue\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    A Vue component for the Lottie player.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/svelte-lottie-player\" target=\"_blank\" rel=\"noopener noreferrer\"\u003esvelte-lottie-player\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    Lottie player component for use with Svelte.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/jlottie\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ejLottie\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/orgs/dotlottie/repositories\" target=\"_blank\" rel=\"noopener noreferrer\"\u003edotLottie\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of \".lottie\".\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/lottie-js\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elottie-js\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    The library consists of methods to map the Lottie JSON to the object model and interact with properties as well as manipulate them.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/LottieFiles/lottie-theming\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elottie-theming\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\n    A library to extract themable properties and apply different themes to a given Lottie\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n\n\u003c/table\u003e\n\n## Community \u0026 Support\n\n- [Github issues.](https://github.com/LottieFiles/lottie-interactivity/issues) For bugs and errors you encounter using this player.\n- [Discord.](https://lottiefiles.com/discord) For hanging out with the community and sharing your awesome Lottie animations!\n\n## Contributing\n\nWe use changesets to maintain a changelog for this repository. When making any change to the codebase that impacts functionality or performance we require a changeset to be present.\n\nTo add a changeset run:\n\n```\nyarn run changeset\n```\n\nAnd select the type of version bump you'd like (major, minor, patch).\n\nYou can document the change in detail and format it properly using Markdown by opening the \".md\" file that the \"yarn changeset\" command created in the \".changeset\" folder. Open the file, it should look something like this:\n\n```\n---\n\"@lottiefiles/pkg1\": minor\n\"@lottiefiles/pkg2\": major\n---\nThis is where you document your **changes** using Markdown.\n- You can write\n- However you'd like\n- In as much detail as you'd like\nAim to provide enough details so that team mates and future you can understand the changes and the context of the change.\n```\n\nYou can commit your changes and the changeset to your branch and then create a pull request on the develop branch.\n\n## License\n\nMIT License © LottieFiles.com\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLottieFiles%2Flottie-interactivity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLottieFiles%2Flottie-interactivity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLottieFiles%2Flottie-interactivity/lists"}