Share Posted August 3, 2012 This probably a basic question, but how do it set/mask the area of my animation in GSAP js? Link to comment Share on other sites More sharing options...
Share Posted August 3, 2012 HTML/JS doesn't really support masking like in Flash, but If you just need a rectangular mask, you can place your content into a <div> that you set to be a certain size and then set its overflow css to "hidden". I know, it's not nearly as nice as it is in Flash which is quite frustrating. And to be clear, this has nothing to do with GSAP - it's just a limitation of HTML/CSS/JS/browsers. Link to comment Share on other sites More sharing options...
Share Posted August 6, 2012 Also, an additional advanced technique is to simultaneously size/move the parent div (need CSS overflow:hidden) while moving the nested div (holding all the elements) on the x/y (left/top) axis. Doing this with a little clever x/y width/height math offset tricks will essentially achieve any masking for any NSEW (north south east or west) direction. A minimalist example follows below. I would presume diagonal masking could also be achieved by rotation of the parent and/or nested elements using some additional positional and sizing tricks. masking.zip <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Masking Example</title> <script src="TweenMax.min.js"></script> </head> <body> <div id="parent" style="position:absolute; width:500px; height:300px; overflow:hidden; background-color:#666;"> <div id="child" style="position:absolute; width:300px; height:150px; overflow:hidden; background-color:#CCC;"></div> </div> <script> function $(id){return document.getElementById(id);} // mask reveal from left to right (default simple) TweenMax.fromTo($('parent'), 2, {css:{width:0}}, {css:{width:400}}); // mask reveal from top to bottom (default simple) //TweenMax.fromTo($('parent'), 2, {css:{height:0}}, {css:{height:300}}); // mask reveal from right to left (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{width:0, x:400}}, {css:{width:400, x:0}}); // TweenMax.fromTo($('child'), 2, {css:{x:-400}}, {css:{x:0}}); // mask reveal from bottom to top (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{height:0, y:300}}, {css:{height:300, y:0}}); // TweenMax.fromTo($('child'), 2, {css:{y:-300}}, {css:{y:0}}); </script> </body> </html> I've actually been working on a JavaScript masking display object class that objectizes the parent and child offsets for simple directional masking. The complex animated masking on the other hand is far more daunting in HTML/CSS/JavaScript. I suspect a plugin type solution could be devised for simple two-tiered masking approaches (parent mask container and 1 child container holding all of the other elements), but doing multiple nested masking past the 2nd level makes my head hurt. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now