Jump to content
Search Community

SVG Animation Troubles

timherbert test
Moderator Tag

Go to solution Solved by jamiejefferson,

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




I also accidently linked the private codepen.

Here is the public one:

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

Link to comment
Share on other sites

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">
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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