SVG Animation pile up

[Matt Severin]

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

[Carl]

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.

[Matt Severin]

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.

[Matt Severin]

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.