0

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
clayRay
  • 683
  • 1
  • 14
  • 32
  • Hi, please include a [mcve] in the question itself. – TylerH Jan 22 '19 at 22:16
  • Hi @TylerH can you please let me know how I could have improved the question? I have included verifiable CodePen examples. How is the question incomplete, or could be made more minimal? Thanks, – clayRay Jan 22 '19 at 22:36
  • To prevent things like link-rot, one of the site's rules is that you need to include the code *in the question body itself*; just linking to the code as it exists somewhere else (e.g. CodePen) is not enough. We actually have a neat 'runnable snippet' feature in the code editor. Just click edit and then click the icon of the document with the `< >` on it, and paste your SVG into the HTML window and the CSS into the CSS window and the JS into the JS window and hit 'insert snippet into post' or whatever it says. – TylerH Jan 22 '19 at 22:39

2 Answers2

1

You can avoid this issue by giving a width in pixels to #container the responsiveness of percentages sometimes causes pixels to be just slightly off. Use media-queries if you need to have different sizes for other screen dimensions.

#container {
  margin: 0 auto;
  width: 400px;
}
groteworld
  • 701
  • 8
  • 20
  • Thanks @groteworld, I've upvoted your answer but Alen.Toma's answer was much easier to apply, so I've marked his as the correct one. Unfortunately in the Divi framework, % widths are everywhere. – clayRay Jan 23 '19 at 00:05
1

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 %.

Alen.Toma
  • 4,684
  • 2
  • 14
  • 31