slidev-addon-animattr
v1.1.2
Published
SliDev addon to animate an element with a data-attribute
Downloads
14
Maintainers
Readme
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.
npm install slidev-addon-animattr
Then, add the following frontmatter to your slides.md
.
Usage
Make sure to check out this demo presentation, 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.
The argument are passed to v-animattr
as attributes.
<div v-animattr :length="2">
This div will change background color 2 times
</div>
<style>
/* Base Styling */
div {
background-color: green;
}
/* First change */
div[data-animattr~="0"] {
background-color: orange;
}
/* Second change */
div[data-animattr~="1"] {
background-color: red;
}
</style>
The directive accepts different kind of arguments, in order to accommodate different scenarios.
Check out slide 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.<!-- In the example below, `data-animattr` will be: 0. "" 1. "0" 2. "0 1" 3. "0 1 2" --> <div v-animattr :length="3" />
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.<!-- In the example below, `data-animattr` will be: 0. "0" 1. "0 1" 2. "0 1 2" --> <div v-animattr :start="0" :length="3" />
You can also modify the behaviour with the
stride
argument, only adding a step every N clicks.<!-- In the example below, `data-animattr` will be: 0. "0" 1. "0" 2. "0 1" 3. "0 1" 4. "0 1 2" --> <div v-animattr :start="0" :length="3" :stride="2" />
Instead of passing a
length
, you can also give it astop
argument to explicitly stop at a certain end click.<!-- In the example below, `data-animattr` will be: 0. "" 1. "" 2. "0" 3. "0 1" 4. "0 1 2" --> <div v-animattr :start="2" :stop="4" />
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 value0
means when the slide first appears.<!-- In the example below, `data-animattr` will be: 0. "" 1. "0" 2. "0" 3. "0 1" 4. "0 1 2" --> <div v-animattr :clicks="[1, 3, 4]" />
Note that you can also pass in all the values as an object to the directive directly: <div v-animattr={...} />
.
Additionally, there are a few shorthand syntax forms, which can be found in slide 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 to load the SVG as a Vue component.
It locates any <style />
tags inside of your SVG and loads it as 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 of our demo for a live example of SVG CSS transitions.
SMIL animations
You can start and stop SMIL animations 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 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 thedata-animattr
attribute values and not the slidev click value.<MySVGFile :length="3" :smil="['anim1 anim2', '', 'anim3']" /> <MySVGFile :length="3" :smil="{0: 'anim1 anim2', 2: 'anim2'}" />
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).<MySVGFile :length="2" :smil="['+anim1', '-anim1']" />
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~
.<MySVGFile :length="2" :smil="['>anim1_fw <anim1_bw', '>~anim1_fw']" />
Contributing
pnpm install
pnpm run dev
to start a preview ofexample.md