Share Posted August 8, 2016 I'm currently using GSAP to create a few banners with SVG shapes (text from Illustrator outline since I can't get Webfonts for these). They work and look fine on my machine, but when tested on a PC in Chrome, there is a small issue where the moving SVG element leaves a sort of "trail" graphically, but only when viewed at 100%.I've attached a mocked up version of the issue (I tried getting the user to provide a zoomed in screenshot but she says the issue vanished when zoomed in).Has anyone encountered this when animating SVG elements? I am imagining it is probably a hardware issue. Link to comment Share on other sites More sharing options...
Share Posted August 8, 2016 Hi bandaro, do you think you could setup a reduced example where the issue is reproduced? I've never heard or seen such behaviour. We'll be more than happy to assist you but we will need to able to see the issue in question. Thanks! Link to comment Share on other sites More sharing options...
Share Posted August 8, 2016 GSAP only animates numeric properties. It doesn't do any of the rendering so I don't see how this could be caused by the platform. It sure looks like a graphics card/driver problem to me. Happy tweening. Link to comment Share on other sites More sharing options...
Share Posted August 9, 2016 I agree with @PointC. I've had similar issues when animating SVG's on older versions of iOS, and although that was using SMIL rather than GSAP, but I doubt that would have made a huge difference. I would test on other PC machine with the same version of Windows/Chrome. One question though, is that text an SVG font? or has the text been converted to outlines? Link to comment Share on other sites More sharing options...
Author Share Posted August 11, 2016 Text was converted to outlines. I'm assuming it is a hardware issue, as mentioned here. I haven't gotten the chance to test on an alt machine yet, but I'll do that. Thanks! Link to comment Share on other sites More sharing options...
Share Posted March 22, 2017 Totally raising this from the dead but this is because of the animation inaccurately repainting insufficient area... quick fix is to add box shadow or outline. Check out this Stackoverflow: http://stackoverflow.com/questions/9983520/webkit-animation-is-leaving-junk-pixels-behind-on-the-screen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now