Jump to content
Search Community

How do you remove an SVG element when you're done animating it?

Halcyon 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

So I'm doing some experimentation to see if I can find a use for SVG in my web game. I can tween SVG elements without a problem, but I cannot figure out how to remove them when I'm done. The typical this.target.parentNode.removeChild(this.target) isn't working for Raphael objects... so how do you do it?

See the Pen OPJQMb by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Oh, you know what? I was being special. I was using Raphael and the greensock plugin which I should have mentioned. I don't know what I don't know when it comes to this. In any case, I did some codepen'ing and made a fun demo for you guys. Maybe this will help someone out there. The answer is: use paper.clear() to clear the canvas.

 

See the Pen gbOvbr by maelfyn (@maelfyn) on CodePen

  • Like 1
Link to comment
Share on other sites

Yes I would recommend paper.remove() instead of clear() if you aren't going to be reusing the same paper, since it's leaving hundreds of SVG root nodes in the DOM.

 

Here's a slight modification that sticks to just one Raphael paper

 

See the Pen LEYdae by jamiejefferson (@jamiejefferson) on CodePen

 

Have you considered raphael's successor, snap.svg yet? Also GSAP is quite handy at tweening a lot of SVG properties without a plugin now http://css-tricks.com/svg-animation-on-css-transforms/

  • Like 2
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...