Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JoeH

SVG part overflow not visible

Recommended Posts

Hi,

 

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.

 

Thanks

 

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 post
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 post
Share on other sites

That is brilliant, thank you!

  • Thanks 1
Link to post
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.

×