Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
brendynz

Animate SVG Path white background?

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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.
:)
  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×