Animate SVG Path white background?

[brendynz 1 Likes (Newbie)]

Trying to learn animating along a path with Greensock. I got the animation working, but I can't seem to get rid of the white background. In the codepen, you can see there is supposed to be a green background (bg) in the html file. But a white background, that seems to be within the <SVG> tag is blocking it. Does anyone know why this is happening? Is MorphSVGPlugIn causing this?

Thanks.

See the Pen BzKdMJ by leisurelarry (@leisurelarry) on CodePen

[Carl 9,628 Likes (Superhero)]

hmm, I'm not seeing where the background is set to green or what element is supposed to be green. The css is a bit hard to decipher.

 

I'm fairly confident that MorphSVG isn't doing anything as a quick test of removing the TweenLite / MorphSVG code did not change anything.

 

If the svg background should be green you can do:

svg {
  background-color:green;
}

Can you clean up the CSS a bit and add a comment that shows where things are set to be green but aren't? It helps to remove everything that isn't related to the problem.

[PointC 10,926 Likes (Superhero)]

I didn't see anything with a green background either.

 

You mentioned a (bg) and you do have a div with id of #bg, but it looks like it has a gray background. It doesn't currently show because the left and top positions are not set. It doesn't have anything to do with the Morph plugin. If you change your CSS, it will show correctly.

#bg {
  background-color: #666666;
  position: absolute;
  width: 100%;
  height: 100%;
  left:0; // this was missing
  top:0; // this was missing
}

Hopefully that helps. If that wasn't what you were referring to, some more details and a simplified demo would be great.

 

Happy tweening.

[brendynz 1 Likes (Newbie)]

Looks like it was indeed just missing the left/top positions. My bad. Thanks!