Posts posted by timherbert
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!
See the Pen YPQjLW by timherbert (@timherbert) on CodePen
Sounds completely fair to me. Thanks for the quick reply and the amazing animation engine. Keep up the good work.
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.
I also accidently linked the private codepen.
Here is the public one:
See the Pen vzuDr by timherbert (@timherbert) on CodePen
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:
Chrome SVG Alpha Mask Bug
I'll try that later today or tonight thanks!