Jump to content
GreenSock

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

cropping area of animation?

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

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

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

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.

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