Repository files navigation

Slidev addon toanimate an element with a data-*attributes

• 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

First, install the addon.

npm install slidev-addon-animattr

Then, add the following frontmatter to yourslides.md.

---addons:  -slidev-addon-animattr---

More Information

Make sure to check out thisdemo presentation,which shows some of the main capabilities of AnimAttr.

Thev-animattr directive gives your HTML elements an additionaldata-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 withCSS attribute selectors.The argument are passed tov-animattr as attributes.

<divv-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 outslide 4 of our demo for a live example of the different values.

The most basic use case is to pass it alength 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"--><divv-animattr:length="3"/>

You can also specify astart argument.By default it is set to1, 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 to0 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"--><divv-animattr:start="0":length="3"/>

You can also modify the behaviour with thestride 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"--><divv-animattr:start="0":length="3":stride="2"/>

Instead of passing alength, 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"--><divv-animattr:start="2":stop="4"/>

Finally, you can also pass aclicks 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"--><divv-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 inslide 5 of the demo.

The second part of this plugin is that it allows you to addSVG files to yourcomponents/ folder.You can then use these as regular components in your slides.The main advantage of loadingSVG files as components is that you can style them with CSS and thus also animate them with thev-animattr directive.

This addon uses a custom plugin build on top ofsvgo to load theSVG as a Vue component.It locates any<style /> tags inside of yourSVG and loads it asScoped 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 outslide 8 of our demo for a live example of SVG CSS transitions.

You can start and stopSMIL animations by providing asmil argument.These animations are more complex, but allow for things that CSS transformations do not (morph, move along path, etc).

Check outslide 9 of our demo for a live example of SVG SMIL animations.

Simply add asmil 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']"/>

• pnpm install
• pnpm run dev to start a preview ofexample.md

MIT License © 20230phoff