Jump to content


SVG part overflow not visible

Recommended Posts



I'm a bit stuck on this animation I'm creating, one side of a path is not overflowing when the shape distorts, it's just on the 'R'.


I have included a crude screenshot to show which section I mean.


Hoping someone can help me figure this out.




Edit: I've just noticed it happens on the M amd the F also, on the same side.


Screenshot 2020-09-17 at 23.08.05.png

See the Pen YzqORwv by orionJoe (@orionJoe) on CodePen

Link to comment
Share on other sites

That has nothing to do with GSAP (which is animating the values correctly) - sounds more like a browser rendering thing. I edited the SVG data to slap some extra [invisible] stuff on that path just to alter its bounding box and it seemed to work. I added "M950,300l200,100z" to the end of the "d" attribute. There's nothing magical about those values - I just chose some coordinates that'd be further off to the right. 

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


Does that help? 

  • Like 4
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.