Animation bugs when more than one toggle

[Strryke]

Hi Alfie. Nice work, really like this package and been using it for a long time.

Today I was implementing a navbar, with mobile and desktop variants, and I created a ThemeToggle.jsx component and imported it into both variants, and noticed a bug with the animation.

I recreated it in a simple codepen. https://codesandbox.io/s/hopeful-wave-srvgy9?file=/src/App.js

I think it might have something to do with the CSS selectors? not too sure. I fixed it on my end currently by only rendering one variant of the navbar at a time (previously I was using CSS to hide). Would love it if you have the time to take a look :)

[AlfieJones]

Thanks for the support, it means a lot

It's to do with the svg id's on the svgs. The react components have a prop call idPrefix which lets you prefix all the id's which should avoid this scenario.

<Classic duration={750} idPrefix="1" />
<Classic duration={750} idPrefix="2" />

If you're using the svg's directly, then you would need to manually go through each id and ensure it is unique

[Strryke]

ahh thanks for the reply!! that worked for me 😄