timherbert

I'll try that later today or tonight thanks!

So I've been struggling to figure out how to resolve this issue and figured there has to be some kind of resolution to this by now as I've seen people reporting this bug with chrome for years it seems like. I managed to get it working in Firefox and IE, haven't checked anything else. Although Ie has issues with unset SVG Widths and Heights so it seems like I need to setup a backup script to set that on load for IE. But this is driving me nuts. I just want to animate some simple clouds through a background. The only problem is the clouds are using an alpha mask which won't seem to animate. Also this isn't the final animation, I am just trying to get it to work before I spend more time on it. Any help would be greatly appreciated! Thanks.

Sounds completely fair to me. Thanks for the quick reply and the amazing animation engine. Keep up the good work.

So I purchased the business license not to long ago then just recently got a job at a small startup. I was curious if I can use this on projects at work and lend my license or would the business need to get their own license?

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.

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

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: http://codepen.io/timherbert/pen/vzuDr/

Thanks for the help guys. I've actually seen different versions of these examples. Rodrigo I actually used yours for the first GSAP site I did. So thank you for the information and hard work you put in on this project, and Michael that horizontal tutorial got me thinking about an animation I can do for my current freelance project also so thank you. The bastaa tutorial's js scroll function is almost an exact copy of what I posted, as far as how it works, and I don't like the fixed heights for scrolling in the other tutorial as its unreliable for different height screens. Unless I missed something somewhere, as that is possible. But my site is still built on that premise http://timherbert.net so again thank you. I am probably going to try to figure this out in the am as its effecting one of the main animations on my main page and I want to be able to position it how I want not let how far the animation is from the top of the document dictate how it animates. If I figure out something worthwhile I'll post it here.

So I found a tutorial here: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 That makes parallax scrolling very simple and easy to understand. I want to take the javascript from the tutorial and apply GSAP. Not sure how to do that however.. The JavaScript from the tutorial. I'm sure it's easy but it would probably take me hours of playing with it where someone here has probably done it already or could do it in a minute or two. var $window = $(window); $('section[data-type=background]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); });