vivus
vivus copied to clipboard
Vivus MAP Array Empty, no animation rendered.
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.
Awesome library btw, kicks ass =)
Hi @RaidPRDev Thanks for reporting the bug. That's an interresting discovery. Can you provide me a way to test this? That would be very handy. I would like to analyse this issue, I wonder which other lib is messing with the specs. However the patch should be pretty straighforward tho :) Many thanks,
- Max