Jump to content
GreenSock

Matt Severin

SVG Animation pile up

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

Hi all, I am adding svg shapes to the DOM using Raphael and setInterval().

 

I notice when I toggle away from the main browser tab to another tab, then I toggle, and the back shapes pile up on each other.

 

Any suggestions on how to avoid this?

 

Edit: I've added a clearInterval() to stop the animation, svg generation after 10 seconds

See the Pen dMPxzo by mattparkerseverin (@mattparkerseverin) on CodePen

  • Like 1
Link to comment
Share on other sites

The reason is because everything that GSAP does runs off of requestAnimationFrame and always remains perfectly synchronized. GSAP can  power down to 1 or 2 fps when a tab loses focuses and then resume seamlessly when it regains focus. Unfortunately your setInterval() call just keeps running and running.

 

The solution is to ditch setInterval for TweenLite.delayedCall() this way everything will remain synchronized.

 

I made the change for you

 

http://codepen.io/GreenSock/pen/EKjYWK?editors=0010

 

I didn't study your code for long but it seems that every second you are generating a new SVG path and adding it. Over time you could have thousands and thousands of these things laying around. Setting the autoAlpha:0 does not remove them from memory or the DOM. I'm concerned it could cause a crash at some point. Probably better to just create 50 or 100 in a group <g> and move the whole group with a repeating tween that repeats infinitely. Just my 2 cents.

  • Like 2
Link to comment
Share on other sites

Hey Carl, thanks for the second piece of advice, I've added a pause and a clearinterval a few seconds in to my local copy after I submitted the codepen. The real animation isn't infinite (I promise!) I'll put the pause/clear in my codepen as well.

  • Like 1
Link to comment
Share on other sites

I'll also probably use Raphael to remove the paths when they are off screen. I currently need to add them and remove them dynamically or else I would've had a 'pre-rendered' row.

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