Jump to content


How to give SVG Element Overflow: Hidden ?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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