SVG Banner Animation Leaving Artifacts

[ladyRalph 0 Likes (Newbie)]

Hello!
 
I've been making svg animated banner ads, and the client ran into a bit of a snag- there are some artifacts being left behind by the animation on certain computers. It seems to only be in Chrome, but isn't consistent across computers. The client is running the same OS and version of Chrome as I am (Windows 10 / Chrome 55.0.2883.87 m), yet I have no issues.

 
Here is a screenshot of what's showing up underneath the Call-To-Action button (scales in from 0, there is no shadow under the button) and some text (moves up from below the viewbox):

 
 
This is the transformations I'm applying:

t1.fromTo(text2, 0.75, {y:75}, {y:0});
t1.fromTo(cta, 0.4, {autoAlpha: 0, scale: 0, transformOrigin: '50% 50%'}, {autoAlpha: 1, scale: 1, ease: Back.easeOut}); 

 
Has anyone else encountered this?

 

 

[PointC 14,466 Likes (Superhero)]

Hi ladyRalph 

 

That looks like a graphics card issue to me. Could also be a browser bug, but I can't see GSAP being the culprit. GSAP doesn't render anything - it just animates values. I'd have the client check on a few different systems and see if you can isolate it to a particular card and/or browser.

 

Happy tweening.

[ladyRalph 0 Likes (Newbie)]

Hey, thanks for the quick response!!  I thought it might be a graphics thing...

 

Is there any way of getting around this?

 

Thanks!

[PointC 14,466 Likes (Superhero)]

Make sure they have the latest driver installed would be the first thing I'd recommend. 

[Oliver16Years 208 Likes (Specialist)]

Try to put a white stroke around the text, or animate it with attr plugin. CSS is not alway compatible with SVG animation.