Jump to content
Search Community

Animate SVG Path white background?

brendynz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?


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

Link to comment
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 {

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 comment
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 comment
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.
  • Create New...