{"id":15507688,"url":"https://github.com/0phoff/slidev-addon-animattr","last_synced_at":"2025-10-27T21:07:48.387Z","repository":{"id":171913860,"uuid":"648553232","full_name":"0phoff/slidev-addon-animattr","owner":"0phoff","description":"SliDev addon to animate an element with a data-attribute","archived":false,"fork":false,"pushed_at":"2023-06-24T14:55:33.000Z","size":1389,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T02:18:39.060Z","etag":null,"topics":["animate","attribute","css","slidev","slidev-addon","smil","svg"],"latest_commit_sha":null,"homepage":"https://0phoff.github.io/slidev-addon-animattr/","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/0phoff.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-02T08:34:43.000Z","updated_at":"2025-04-19T04:00:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"3d487bdb-d3f9-4b3e-9ec4-c97a38a2cf81","html_url":"https://github.com/0phoff/slidev-addon-animattr","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"f44f5575d4ef1e5b83432549ebabc123d12415f3"},"previous_names":["0phoff/slidev-addon-animattr"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0phoff%2Fslidev-addon-animattr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0phoff%2Fslidev-addon-animattr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0phoff%2Fslidev-addon-animattr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0phoff%2Fslidev-addon-animattr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0phoff","download_url":"https://codeload.github.com/0phoff/slidev-addon-animattr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250354517,"owners_count":21416752,"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":["animate","attribute","css","slidev","slidev-addon","smil","svg"],"created_at":"2024-10-02T09:33:13.969Z","updated_at":"2025-10-27T21:07:43.347Z","avatar_url":"https://github.com/0phoff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"AnimAttr\" src=\"https://raw.githubusercontent.com/0phoff/slidev-addon-animattr/master/components/logo-1.svg\" width=\"700\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://sli.dev\"\u003eSlidev\u003c/a\u003e addon to \u003cb\u003eanimate\u003c/b\u003e an element with a data-* \u003cb\u003eattributes\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/slidev-addon-animattr\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/slidev-addon-animattr?color=4c72b0\u0026label=\"\u003e\u003c/a\u003e\n\u003ca href=\"https://0phoff.github.io/slidev-addon-animattr\"\u003e\u003cimg alt=\"Demo\" src=\"https://img.shields.io/badge/-demo-3d5b8d\"\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dm/slidev-addon-animattr?color=2e446a\u0026label=\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- **v-animattr** directive allows you to animate elements with CSS attribute selectors\n- **SVG** files can be loaded as components with scoped CSS automatically\n- **SMIL** animations allows for even more possibilities\n \n## Installation\n\nFirst, install the addon.\n\n```bash\nnpm install slidev-addon-animattr\n```\n\nThen, add the following frontmatter to your `slides.md`.  \n\n\u003cpre\u003e\u003ccode\u003e---\naddons:\n  - \u003cb\u003eslidev-addon-animattr\u003c/b\u003e\n---\u003c/code\u003e\u003c/pre\u003e\n\n[More Information](https://sli.dev/addons/use.html)\n\n## Usage\nMake sure to check out this [demo presentation](https://0phoff.github.io/slidev-addon-animattr),\nwhich shows some of the main capabilities of AnimAttr.\n\n### v-animattr directive\nThe `v-animattr` directive gives your HTML elements an additional `data-animattr` attribute.\nThis attribute starts empty, but gets filled with increasing numbers whilst stepping through the clicks of your slide.\nThis allows you to animate your elements with [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). \nThe argument are passed to `v-animattr` as attributes.\n\n```html\n\u003cdiv v-animattr :length=\"2\"\u003e\nThis div will change background color 2 times\n\u003c/div\u003e\n\n\u003cstyle\u003e\n    /* Base Styling */\n    div {\n        background-color: green;\n    }\n\n    /* First change */\n    div[data-animattr~=\"0\"] {\n        background-color: orange;\n    }\n\n    /* Second change */\n    div[data-animattr~=\"1\"] {\n        background-color: red;\n    }\n\u003c/style\u003e\n```\n\n\u003cbr/\u003e\n\nThe directive accepts different kind of arguments, in order to accommodate different scenarios.  \nCheck out [slide 4](https://0phoff.github.io/slidev-addon-animattr/4) of our demo for a live example of the different values.\n\n\u003e The most basic use case is to pass it a `length` argument, which will add N clicks to your element.\n\u003e At each click, a number from 0 to N-1 is added to data-animattr.\n\u003e \n\u003e ```html\n\u003e \u003c!--\n\u003e In the example below, `data-animattr` will be:\n\u003e 0. \"\"\n\u003e 1. \"0\"\n\u003e 2. \"0 1\"\n\u003e 3. \"0 1 2\"\n\u003e --\u003e\n\u003e \n\u003e \u003cdiv v-animattr :length=\"3\" /\u003e\n\u003e ```\n\n\u003e You can also specify a `start` argument.\n\u003e By default it is set to **1**, so that you effectively start with the base state and each value is added as a click,\n\u003e but you can set this value to any number greater than zero.\n\u003e Setting it to **0** effectively allows you to start an animation when the slide loads.\n\u003e \n\u003e ```html\n\u003e \u003c!--\n\u003e In the example below, `data-animattr` will be:\n\u003e 0. \"0\"\n\u003e 1. \"0 1\"\n\u003e 2. \"0 1 2\"\n\u003e --\u003e\n\u003e \n\u003e \u003cdiv v-animattr :start=\"0\" :length=\"3\" /\u003e\n\u003e ```\n\n\u003e You can also modify the behaviour with the `stride` argument, only adding a step every N clicks.\n\u003e \n\u003e ```html\n\u003e \u003c!--\n\u003e In the example below, `data-animattr` will be:\n\u003e 0. \"0\"\n\u003e 1. \"0\"\n\u003e 2. \"0 1\"\n\u003e 3. \"0 1\"\n\u003e 4. \"0 1 2\"\n\u003e --\u003e\n\u003e \n\u003e \u003cdiv v-animattr :start=\"0\" :length=\"3\" :stride=\"2\" /\u003e\n\u003e ```\n\n\u003e Instead of passing a `length`, you can also give it a `stop` argument to explicitly stop at a certain end click.\n\u003e \n\u003e ```html\n\u003e \u003c!--\n\u003e In the example below, `data-animattr` will be:\n\u003e 0. \"\"\n\u003e 1. \"\"\n\u003e 2. \"0\"\n\u003e 3. \"0 1\"\n\u003e 4. \"0 1 2\"\n\u003e --\u003e\n\u003e \n\u003e \u003cdiv v-animattr :start=\"2\" :stop=\"4\" /\u003e\n\u003e ```\n\n\u003e Finally, you can also pass a `clicks` array, which tells the directive to only add a number to the attribute at those specific click values.\n\u003e Note that the value `0` means when the slide first appears.\n\u003e \n\u003e ```html\n\u003e \u003c!--\n\u003e In the example below, `data-animattr` will be:\n\u003e 0. \"\"\n\u003e 1. \"0\"\n\u003e 2. \"0\"\n\u003e 3. \"0 1\"\n\u003e 4. \"0 1 2\"\n\u003e --\u003e\n\u003e \n\u003e \u003cdiv v-animattr :clicks=\"[1, 3, 4]\" /\u003e\n\u003e ```\n\nNote that you can also pass in all the values as an object to the directive directly: `\u003cdiv v-animattr={...} /\u003e`.\nAdditionally, there are a few shorthand syntax forms, which can be found in [slide 5](https://0phoff.github.io/slidev-addon-animattr/5) of the demo.\n\n### SVG as components\nThe second part of this plugin is that it allows you to add **SVG** files to your `components/` folder.\nYou can then use these as regular components in your slides.\nThe main advantage of loading **SVG** files as components is that you can style them with CSS and thus also animate them with the `v-animattr` directive.\n\nThis addon uses a custom plugin build on top of [svgo](https://github.com/svg/svgo) to load the **SVG** as a Vue component.\nIt locates any `\u003cstyle /\u003e` tags inside of your **SVG** and loads it as [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css) for the component.\nThis allows you to embed the necessary CSS styling for your animations in the file and reuse the component more easily.\n\nCheck out [slide 8](https://0phoff.github.io/slidev-addon-animattr/8) of our demo for a live example of SVG CSS transitions.\n\n### SMIL animations\nYou can start and stop [SMIL animations](https://css-tricks.com/guide-svg-animations-smil) by providing a `smil` argument.\nThese animations are more complex, but allow for things that CSS transformations do not (morph, move along path, etc).\n\nCheck out [slide 9](https://0phoff.github.io/slidev-addon-animattr/9) of our demo for a live example of SVG SMIL animations.\n\n\u003e Simply add a `smil` argument, which can either be an array of animation IDs to execute or an object where the keys are the indices at which to run.\n\u003e Multiple IDs can be separated by spaces.\n\u003e Note that the indices represent the `data-animattr` attribute values and not the slidev click value.\n\u003e \n\u003e ```html\n\u003e \u003cMySVGFile :length=\"3\" :smil=\"['anim1 anim2', '', 'anim3']\" /\u003e\n\u003e \u003cMySVGFile :length=\"3\" :smil=\"{0: 'anim1 anim2', 2: 'anim2'}\" /\u003e\n\u003e ```\n\n\u003e You can prepend the IDs with a `+` or `-` to either start or stop the animation.  \n\u003e Use a `~` to tell the directive to stop the animation at the end of a cycle (before repeating).\n\u003e \n\u003e ```html\n\u003e \u003cMySVGFile :length=\"2\" :smil=\"['+anim1', '-anim1']\" /\u003e\n\u003e ```\n\n\u003e If you only want to execute the animation when moving forwards through your slides, prepend it with `\u003e`.  \n\u003e `\u003c` means it will run when moving backwards through the slides.  \n\u003e This can be combined with `+`, `-` and `~`.\n\u003e \n\u003e ```html\n\u003e \u003cMySVGFile :length=\"2\" :smil=\"['\u003eanim1_fw \u003canim1_bw', '\u003e~anim1_fw']\" /\u003e\n\u003e ```\n\n\n## Contributing\n\n- `pnpm install`\n- `pnpm run dev` to start a preview of `example.md`\n\n## License\n\n\u003cp align=\"center\"\u003e\nMIT License © 2023 \u003ca href=\"https://github.com/0phoff\"\u003e0phoff\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"AnimAttr\" src=\"https://raw.githubusercontent.com/0phoff/slidev-addon-animattr/master/components/logo-2.svg\" width=\"350\" /\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0phoff%2Fslidev-addon-animattr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0phoff%2Fslidev-addon-animattr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0phoff%2Fslidev-addon-animattr/lists"}