Jump to content
GreenSock

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

How to give SVG Element Overflow: Hidden ?

Recommended Posts

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

Link to post
Share on other sites

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.

:)

  • Like 4
Link to post
Share on other sites

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

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

×