[SVG Animation Flickering]

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!

[SVG Animation Flickering]

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.

[SVG Animation Flickering]

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!