SVG Animation Flickering

[visualnotion]

Hello!

 

I helped a client with this website and I need to integrate an animation that animates when you scroll (the standing dog starts to run).

 

I have integrated it, but I am seeing a flicker when it animates. I have tried the following on the SVG and/or it's elements (<g>), but can't figure out what needs to change to get rid of the flicker:

 

-webkit-transform:translate3d(0,0,0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

 

Note: I didn't create the animation and am new to GreenSock so other than what I have tried, I am not sure what I need to do.

 

Website in question: https://pricegroupinc.com/homepage-2

 

Any help is greatly appreciated!

[GreenSock]

It's always tough to dig through all the code in a live site with tons of other things on the page, so if you need some help with this in the future, please create a minimal demo with just that flickering animation in a CodePen (or something similar), but I did peek at the code and here's your problem I believe: 

 

.to(['#run-15', '#run-14', '#run-13', '#run-12', '#run-11', '#run-10', '#run-9', '#run-8', '#run-7', '#run-6', '#run-5', '#run-4', '#run-3', '#run-2', '#run-1'], .01, {opacity: 1, stagger: {each: .05, repeat: 1, repeatDelay: .04, yoyo: true}});

You've got each element animating its opacity up and then back down, staggered 0.05 apart, thus the overlapping inbetween states are creating that appearance of "flickering" (while both are partially-transparent). Worse yet, the animation isn't a seamless loop because you've got the final element fading out at the very end...but nothing else is fading IN at that point, and then the whole things loops, so you'll get a flash of white when that last frame fades out completely and then the loop happens. 

 

I took the liberty of copying the SVG into CodePen and creating a helper function that'll create a seamless crossfading animation:

See the Pen d923a6fa41ff46bb6f0de66b87b4c752?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice you've gotta handle the first (or last) element independently to make things seamless. So in my demo, I fade the FIRST one in at the very END of the animation so that when it loops back to the beginning it's full-opacity. 

 

Also, the way you had that code was very inefficient because it was re-creating the entire animation every single time the user started scrolling. It's much better to just create it once and then play()/pause() it. I also added some crossfades of the artwork to make it look a bit better (in my opinion). 

 

Lastly, to minimize the amount of "flashing" during the crossfades, I used an "power2" ease. If you change to linear or an "in" ease of any kind, you'll notice that when both elements are 50% into their fade, the overall look of things is lighter (hence the appearance of "flashing"). A stronger "out" ease ensures that during that inbetween state, the opacity of the elements adds up to more than 100%. 

 

I hope that helps. Happy tweening!

[ZachSaucier]

7 minutes ago, GreenSock said:

the way you had that code was very inefficient because it was re-creating the entire animation every single time the user started scrolling. It's much better to just create it once and then play()/pause() it.

More on that in my article about animating efficiently  

[akapowl]

 

Just to add a teeny tiny bit of advice to @GreenSock's brilliance:

 

When strolling through your code before, I noticed that at one point in the HTML

 

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js' id='gsap-js-js'></script>

 

is being loaded, and you additionaly load the latest GSAP-files.

 

Better remove that old version, to avoid any possible conflicts for the future.

 

 

[visualnotion]

Thank you so much, everyone! Honestly, I was handed this animation from another developer so I was kind of thrown into having to work on it and this feels like a trial by fire.

I have put it in place and it is MUCH better. Thank you! The only item I see now is the weirdness that occurs when a modal opens and is closed (click on an image in the "WHAT" section and then close it). More of the dog's elements seem to appear at once. I am not sure what exactly triggers it, at the moment.

[GreenSock]

Yeah, that's pretty weird and it must have something to do with other things on your site. Like I wonder if you're essentially injecting a new DOM that's duplicating the animation or something, and there are multiple things trying to control the same elements. It's very tough to troubleshoot a live site. Again, if you need help, please create a minimal demo in CodePen so we can make live edits and see what's going in in context. Unfortunately, we just don't have the resources to provide free general consulting services. 

 

Maybe try adding a console.log("create animation") in that helper function I provided and see if it's getting called multiple times. Just a thought. 

 

Anyway, good luck with the project. Happy tweening!

[visualnotion]

11 hours ago, GreenSock said:

Yeah, that's pretty weird and it must have something to do with other things on your site. Like I wonder if you're essentially injecting a new DOM that's duplicating the animation or something, and there are multiple things trying to control the same elements. It's very tough to troubleshoot a live site. Again, if you need help, please create a minimal demo in CodePen so we can make live edits and see what's going in in context. Unfortunately, we just don't have the resources to provide free general consulting services. 

 

Maybe try adding a console.log("create animation") in that helper function I provided and see if it's getting called multiple times. Just a thought. 

 

Anyway, good luck with the project. Happy tweening!

 

Thank you for all of the tips and recommendations.

I'll have to inspect their site to see what else is going on.

Thanks again!