#238·vivus

Vivus MAP Array Empty, no animation rendered.

Author: RaidPRDevCreated Aug 4, 2021Updated Aug 5, 2021

Vivus version: 0.4.6

Browser: Chrome 92.0.4515.131, Edge 92.0.902.62 and Firefox 90.0.2 ( Windows 10 )

Steps to reproduce it: So my svgs are not animating, but I did get it to work. More on that later. When I log the Vivus element returned by the onReady function, the MAP array prop is empty.

A bit on my environment: I'm using Webpack 4.44.2 for bundling my code. I am using the file prop to load my svg. When Vivus iterates through the paths , it will trigger the Vivus.prototype.isInvisible function. It will attempt to get the data-ignore attribute el.getAttribute('data-ignore'), and then checks if ignoreAttr is not null. However, ignoreAttr is set as undefined on my end, and so it will not allow the paths to populate the MAP array.

What is interesting is, if I use plain HTML and JavaScript, no bundling. It works fine. The ignoreAttr is null and passes the condition if (ignoreAttr !== null) check.

I used this example to validate this - http://maxwellito.github.io/drafts/vivus-198/index.html

Anyways, I got it to work nice by adding ( ignoreAttr !== undefined ) to the following line:

if (ignoreAttr !== null && ignoreAttr !== undefined)

So the issue may very well be Webpack and my configuration. For what ever reason, ignoreAttr sets to undefined instead of null. Hope this may help someone with a similar setup.