[Feature Request] Animate individual paths

[jmaris]

Please define your problem or issue as clear as possible.

For a problem, please fill the following:

Vivus version: 0.4.6

Browser: Firefox (latest release)

Hey, I was wondering if it is possible to animate individual paths.

To explain what I am trying to do, I would like for part of my SVG to be rendered by default, except a select set that I want to animate, then to have a javascript function that allows me to animate those paths when, for instance, a button is clicked

Is that possible with the library as-is? I wasn't 100% sure from the documentation

Thanks :)

[maxwellito]

Hi @jmaris

Thanks for your patience. After looking at your needs, I doubt this library can help you to achieve this. However, there's maybe a trick to try. I can't promess it works:

1. Set your indivudual paths in groups

<svg>
  <g id="group_1">
    <circle ..../>
  </g>
  <g id="group_2">
    <circle ..../>
    <circle ..../>
  </g>
</svg>

2. Create one Vivus object per group

const g1 = new Vivus('group_1', {start: 'manual'});
const g2 = new Vivus('group_2', {start: 'manual'});

3. Use them when needed

randomButton.addEvenetListener('click', () => {
  g1.play();
})

I hope this makes sense

[jmaris]

This makes perfect sense, i'll give it a go :)
Thanks !