javascriptcsssvgbodymovin

Parent DIV's CSS interferes with SVG animation

We've moved an SVG/JS animation created with the Adobe After Effects Bodymovin plugin from one Wordpress site to another. On the old site (which I unfortunately can't show you), the animation works flawlessly. On the new site, depending on the size of the browser window, the animation contains glitches that appear to be caused by some sort of rounding error in the animation mask.

On one or more edges of the globe, you can occasionally (depending on viewport width) see a one pixel-wide bit of the scrolling background graphic appear. See image.

glitches near edge of animation

I've isolated the animation in CodePen. It works fine here, no matter what size the viewport is set to.

However, when I introduce this tiny bit of CSS such as this...

margin: 0 auto;
width: 70%;

... into the style of the parent DIV, the glitch starts happening. See here.

On the original animation, the mask extends a lot further than the edges of the globe, so I suspect the fact that the mask now just reaches to the edges of the globe is some sort of Bodymovin optimization.

Given that this doesn't happen on the old site, I suspect there is some sort of CSS, or perhaps a setting in Bodymovin, that stops this from happening.

The Wordpress site is built with Divi, and the animation sits in a DIV nested inside many other DIVs (ie a module sitting in a column sitting in a row sitting in a section), and most of these DIVs have the width set to various percentages. So I don't think the solution will lie in simplifying the CSS.

Has anyone experienced a problem like this before? Or have suggestions that might help eliminate it?

I have also created an Issue in the Bodymovin GitHub page, but the response times there seem to vary greatly.

Solution

  • I have made some testning on the codepen and was able to make it work when i removed 

    transform: translate3d(0px, 0px, 0px);

    so removing this line of the script should fix the problem

    this.svgElement.style.transform="translate3d(0,0,0)")

    Why are you trying to transform the svg, when its already transforming automaticly.

    This is a possible fix if you still want to retain the settings with margin and width %.