https://github.com/0phoff/slidev-addon-animattr
SliDev addon to animate an element with a data-attribute
https://github.com/0phoff/slidev-addon-animattr
animate attribute css slidev slidev-addon smil svg
Last synced: 4 months ago
JSON representation
SliDev addon to animate an element with a data-attribute
- Host: GitHub
- URL: https://github.com/0phoff/slidev-addon-animattr
- Owner: 0phoff
- License: mit
- Created: 2023-06-02T08:34:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-24T14:55:33.000Z (over 2 years ago)
- Last Synced: 2025-04-23T02:18:39.060Z (10 months ago)
- Topics: animate, attribute, css, slidev, slidev-addon, smil, svg
- Language: TypeScript
- Homepage: https://0phoff.github.io/slidev-addon-animattr/
- Size: 1.32 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Slidev addon to animate an element with a data-* attributes
## Features
- **v-animattr** directive allows you to animate elements with CSS attribute selectors
- **SVG** files can be loaded as components with scoped CSS automatically
- **SMIL** animations allows for even more possibilities
## Installation
First, install the addon.
```bash
npm install slidev-addon-animattr
```
Then, add the following frontmatter to your `slides.md`.
---
addons:
- slidev-addon-animattr
---
[More Information](https://sli.dev/addons/use.html)
## Usage
Make sure to check out this [demo presentation](https://0phoff.github.io/slidev-addon-animattr),
which shows some of the main capabilities of AnimAttr.
### v-animattr directive
The `v-animattr` directive gives your HTML elements an additional `data-animattr` attribute.
This attribute starts empty, but gets filled with increasing numbers whilst stepping through the clicks of your slide.
This allows you to animate your elements with [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
The argument are passed to `v-animattr` as attributes.
```html
This div will change background color 2 times
/* Base Styling */
div {
background-color: green;
}
/* First change */
div[data-animattr~="0"] {
background-color: orange;
}
/* Second change */
div[data-animattr~="1"] {
background-color: red;
}
```
The directive accepts different kind of arguments, in order to accommodate different scenarios.
Check out [slide 4](https://0phoff.github.io/slidev-addon-animattr/4) of our demo for a live example of the different values.
> The most basic use case is to pass it a `length` argument, which will add N clicks to your element.
> At each click, a number from 0 to N-1 is added to data-animattr.
>
> ```html
>
>
>
> ```
> You can also specify a `start` argument.
> By default it is set to **1**, so that you effectively start with the base state and each value is added as a click,
> but you can set this value to any number greater than zero.
> Setting it to **0** effectively allows you to start an animation when the slide loads.
>
> ```html
>
>
>
> ```
> You can also modify the behaviour with the `stride` argument, only adding a step every N clicks.
>
> ```html
>
>
>
> ```
> Instead of passing a `length`, you can also give it a `stop` argument to explicitly stop at a certain end click.
>
> ```html
>
>
>
> ```
> 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.
> Note that the value `0` means when the slide first appears.
>
> ```html
>
>
>
> ```
Note that you can also pass in all the values as an object to the directive directly: `
`.
Additionally, 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.
### SVG as components
The second part of this plugin is that it allows you to add **SVG** files to your `components/` folder.
You can then use these as regular components in your slides.
The 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.
This addon uses a custom plugin build on top of [svgo](https://github.com/svg/svgo) to load the **SVG** as a Vue component.
It locates any `` tags inside of your **SVG** and loads it as [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css) for the component.
This allows you to embed the necessary CSS styling for your animations in the file and reuse the component more easily.
Check out [slide 8](https://0phoff.github.io/slidev-addon-animattr/8) of our demo for a live example of SVG CSS transitions.
### SMIL animations
You can start and stop [SMIL animations](https://css-tricks.com/guide-svg-animations-smil) by providing a `smil` argument.
These animations are more complex, but allow for things that CSS transformations do not (morph, move along path, etc).
Check out [slide 9](https://0phoff.github.io/slidev-addon-animattr/9) of our demo for a live example of SVG SMIL animations.
> 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.
> Multiple IDs can be separated by spaces.
> Note that the indices represent the `data-animattr` attribute values and not the slidev click value.
>
> ```html
>
>
> ```
> You can prepend the IDs with a `+` or `-` to either start or stop the animation.
> Use a `~` to tell the directive to stop the animation at the end of a cycle (before repeating).
>
> ```html
>
> ```
> If you only want to execute the animation when moving forwards through your slides, prepend it with `>`.
> `<` means it will run when moving backwards through the slides.
> This can be combined with `+`, `-` and `~`.
>
> ```html
>
> ```
## Contributing
- `pnpm install`
- `pnpm run dev` to start a preview of `example.md`
## License
MIT License © 2023 0phoff
