SVG Animation Troubles

[timherbert 3 Likes (Newbie)]

So I have this idea to do an landing animation for my new website with svg animation. Where I'll have multiple parallax cloud layers animating.  However, I am having issues getting the idea to work in all browsers, and can't even get it to work at all in CodePen for some reason. 

 

There has to be an easier way to do this kind of animation. I'm just looking to get pointed in the right direction here as I am getting frustrated trying to get this to work. The animation works in Chrome, but Firefox reports the initial position of the clouds and never updates for some reason no matter what I've tried with jQuery anyways. 

 

http://timherbert.net/sandbox/

 

I also accidently linked the private codepen.

Here is the public one:

See the Pen vzuDr by timherbert (@timherbert) on CodePen

[jamiejefferson 1,185 Likes (Superhero)]

If you were getting browser issues, it might be because you saved the requestAnimationFrame definition into requestAnimFrame, but just used window.requestAnimationFrame inside draw.

 

However, you were calling draw on every frame, and creating overwriting tweens each time so they wouldn't work as expected. I'm not sure what you need to use requestAnimationFrame for if you are animating with GSAP so I removed it, and the repeated calls to draw, and it's working fine.

 

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

 

P.S. Don't include this stuff if you are embedding an SVG inside an HTML/XHTML document.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

[timherbert 3 Likes (Newbie)]

Well the idea is to have a continuous background animation using svg objects. The reason I was using requestAnimationFrame is to constantly run. 
 

I know there is a way to get timelines to run forever but I haven't been able to figure out how to get the clouds to animate continuously in that regard. I did lots of searching and found a couple of examples that animate backgrounds but nothing really close to what I'm looking to do. 

 

 

I could set an Interval and do the same thing here but everything I read for web animation says to use requestAnimationFrame

[jamiejefferson 1,185 Likes (Superhero)]

Sure, but if you're leveraging GSAP for animation, then you don't need to bother with requestAnimationFrame (GSAP is already using it for tweening ). If you want to constantly run a tween, you would likely just use repeat and yoyo properties in your tweens. It could also be done with an onComplete callback, or a TweenLite.delayedCall().

 

Here's the section on repeat in the Jump Start guide http://greensock.com/jump-start-js#repeat and you can check out the full API here http://greensock.com/docs/#/HTML5

[jamiejefferson 1,185 Likes (Superhero)]

I've roughly updated the pen with repeating tweens

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

[timherbert 3 Likes (Newbie)]

Your the man! Thank you so much for your help. I've been struggling trying to do this for over a day. I knew I should have posted sooner.