How to give SVG Element Overflow: Hidden ?

[foxhound3311 4 Likes (Newbie)]

I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working.

When checking out the code it seem to be taking the attribute.

 

Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great. 

See the Pen JNBMgK by stinkytofu3311 (@stinkytofu3311) on CodePen

[PointC 14,185 Likes (Superhero)]

Hi @foxhound3311

 

You just need a mask for the group of screen elements. Here's a fork of your pen.

 

See the Pen JNBLYv by PointC (@PointC) on CodePen

Masks are quite helpful when animating elements in an SVG. Here is a pen with the basic mechanics:

 

See the Pen KzmXYK by PointC (@PointC) on CodePen

Hopefully that helps. 

 

Happy tweening.

[Carl 11,109 Likes (Superhero)]

Ahh, PointC beat me to it. For reference, here is a clipPath example:

 

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

 

Learn about clipPath: https://coderwall.com/p/blx8kw/svg-clippath-images

 

[foxhound3311 4 Likes (Newbie)]

Thanks guys! This method will help me a lot in other project too.