Jump to content


SVG Banner Animation Leaving Artifacts

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?



Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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


Is there any way of getting around this?



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.