{"id":13535731,"url":"https://github.com/samuelOsborne/Lottie-interactive","last_synced_at":"2025-04-02T02:31:19.380Z","repository":{"id":46988873,"uuid":"277362359","full_name":"samuelOsborne/Lottie-interactive","owner":"samuelOsborne","description":"Lottie interactive is a custom element adding multiple types of interactivity to Lottie animations.","archived":false,"fork":false,"pushed_at":"2022-12-13T13:00:05.000Z","size":501,"stargazers_count":59,"open_issues_count":12,"forks_count":12,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-03-16T09:36:13.669Z","etag":null,"topics":["after-effects","airbnb","animation-container","interactive","interactivity","javascript","lottie","lottie-animations","plays-animation","stroke-color","stroke-width","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/samuelOsborne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-05T18:40:17.000Z","updated_at":"2024-03-10T03:56:14.000Z","dependencies_parsed_at":"2023-01-28T12:16:28.396Z","dependency_job_id":null,"html_url":"https://github.com/samuelOsborne/Lottie-interactive","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelOsborne%2FLottie-interactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelOsborne%2FLottie-interactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelOsborne%2FLottie-interactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelOsborne%2FLottie-interactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelOsborne","download_url":"https://codeload.github.com/samuelOsborne/Lottie-interactive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743610,"owners_count":20826562,"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":["after-effects","airbnb","animation-container","interactive","interactivity","javascript","lottie","lottie-animations","plays-animation","stroke-color","stroke-width","typescript","typescript-library"],"created_at":"2024-08-01T09:00:24.310Z","updated_at":"2025-04-02T02:31:19.072Z","avatar_url":"https://github.com/samuelOsborne.png","language":"TypeScript","funding_links":[],"categories":["Tools"],"sub_categories":["Creation Tools"],"readme":"![alt Lottie-interactive](https://github.com/samuelOsborne/Lottie-interactive/blob/master/assets/lottie-interactive.png?raw=true)\n\nLottie interactive is custom web element adding multiple types of interactivity to Lottie animations.\n\n## Installation\n\nLottie-interactive is available through npm.\n\n```bash\nnpm install lottie-interactive\n```\n\nLottie-interactive is also available though unpkg.\n\n```HTML\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/lottie-interactive@latest/dist/lottie-interactive.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nFrom javascript module:\n\n```javascript\nimport { LottieInteractive } from \"lottie-interactive\";\n```\n\nUsage in markup:\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"click\"\u003e\u003c/lottie-interactive\u003e\n```\n\n## _Nuxt.js_\n\n- `npm i lottie-interactive`\n- Create a plugin for lottie-interactive in `/plugins/lottie-interactive.client.js`:\n\n```javascript\nimport Vue from \"vue\";\nimport LottieInteractive from \"lottie-interactive\";\n\nVue.use(LottieInteractive);\n```\n\nYou can then use lottie-interactive inside of your templates:\n\n```html\n\u003ctemplate\u003e\n  \u003clottie-interactive\n    path=\"/animations/svgenius-logo.json\"\n    autoplay\n    loop\n    view-box=\"0 0 500 300\"\n  /\u003e\n\u003c/template\u003e\n```\n\nRemarks: Animation files (.json) can be accessed if put inside the `/static` directory. URLs to the animation\ncan also be used.\n\n## _Next.js_\n\n- `npm i lottie-interactive`\n\nThen inside of your pages:\n\n```Javascript\nimport React from \"react\";\n\nexport default function Home() {\n  React.useEffect(() =\u003e {\n    import(\"lottie-interactive/dist/lottie-interactive.js\");\n  });\n\n  return (\n    \u003cdiv\u003e\n          \u003clottie-interactive\n              path=\"/animations/svgenius-logo.json\"\n              autoplay\n              loop\n          /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nRemarks: Animation files (.json) can be accessed if put inside the `/public/` directory. URLs to the animation\ncan also be used.\n\n## Examples\n\n```shell\nnpm i\nnpm start\n```\n\n### Current interactions and available attributes\n\n#### Interactions\n\n##### click\n\nPlays animation when user clicks on animation container\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"click\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### freeze click\n\nFreezes animation when user clicks on animation container\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"freeze-click\" autoplay loop\u003e\u003c/lottie-interactive\u003e\n```\n\n##### hover\n\nPlays animation when user hovers on animation container\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"hover\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### morph\n\nPlays animation when user hovers on animation container, plays in reverse on 'mouseexit' event\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"morph\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### morph-lock\n\nPlays animation when user hovers on animation container. Locks animation at the end if user clicks. Plays in reverse on 'mouseexit' event.\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"morph-lock\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### switch\n\nPlays animation when user clicks on animation container, plays again in reverse on second click\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"switch\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### play-on-show\n\nPlays animation when container is visible\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"play-on-show\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### play-once\n\nPlays animation once\n\n```HTML\n\u003clottie-interactive path=\"button.json\" interaction=\"play-once\"\u003e\u003c/lottie-interactive\u003e\n```\n\n#### Attributes\n\nThe default state for attributes are false or null for stroke width and color.\n\n##### loop\n\nMakes the animation loop\n\n```HTML\n\u003clottie-interactive path=\"button.json\" loop\u003e\u003c/lottie-interactive\u003e\n```\n\n##### s-width\n\nChanges the stroke width of every stroke\n\n```HTML\n\u003clottie-interactive path=\"button.json\" s-width=\"25\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### s-color\n\nChanges the stroke color of every stroke, must be a full hexadecimal color\n\n```HTML\n\u003clottie-interactive path=\"button.json\" s-color=\"#ffffff\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### autoplay\n\nMakes the animation play automatically on load\n\n```HTML\n\u003clottie-interactive path=\"button.json\" autoplay\u003e\u003c/lottie-interactive\u003e\n```\n\n##### speed\n\nSets the speed of the animation\n\n```HTML\n\u003clottie-interactive path=\"button.json\" speed=\"0.5\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### delay\n\nDelay the loading of the animation, defined in milliseconds\n\n```HTML\n\u003clottie-interactive path=\"button.json\" delay=\"3000\"\u003e\u003c/lottie-interactive\u003e\n```\n\n##### reset\n\nResets the animation to the first frame after it has finished playing\n\n```HTML\n\u003clottie-interactive path=\"button.json\" reset\u003e\u003c/lottie-interactive\u003e\n```\n\n##### aspect-ratio\n\nDefine aspect ratio, default value is 'xMidYMid slice', more information [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)\n\n```HTML\n\u003clottie-interactive path=\"button.json\" aspect-ratio='xMidYMid meet'\u003e\u003c/lottie-interactive\u003e\n```\n\n### Usage notice\n\n#### Browser compatibility\n\nCurrently this library is usable on modern browsers supporting **Web components** and **Lottie**.\n\n#### Bundlers\n\nWe recommend using this library with a module bundler such as **webpack**.\n\n### Upcoming features\n\n- Color on hover\n- Animation zooming\n- Padding modifier\n- Upgrade codebase to use Microsoft FAST\n\n### Youtube guides\n\nhttps://www.youtube.com/channel/UCPPNxV39UlVo3emNQSNNTug\n\n### Lottie animations\n\nhttps://svgenius.co\n\nhttps://lottiefiles.com/svgenius\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FsamuelOsborne%2FLottie-interactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FsamuelOsborne%2FLottie-interactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FsamuelOsborne%2FLottie-interactive/lists"}