Jump to content
Search Community

Animated Diagonal Mask

Jamie test
Moderator Tag

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

Hello,

 

I am trying to achieve an animated mask that hides and reveals portions of ImageA over ImageB. I have achieved this but there is some jitter with ImageA.

 

All overflow is set to 'hide'. I had to have a div that is rotated, put an image in that and rotate it the opposite way so the image doesn't appear rotated. If I resize the div, the image slides out of position. If I change the "left" value for the div, the image moves with it (as it should). I have tweens to counter these slides and this is what is causing the jitter.

 

I have the source up and an illustration (at the bottom of the source) showing how I rotated a div and have ImageA counter-rotated inside of it. There is a black box at the top of the example screen that lets you scrub the timeline to view it again.

 

http://morning-eyrie....herokuapp.com/

http://morning-eyrie...com/source.html

 

Is there a better way to do this? Should I be using canvas instead?

Link to comment
Share on other sites

Hi Jamie,

 

That could be happening because you're tweening both the container and the div with the image, thus resulting in the sepia image taking a good shake in the process.

 

One solution would be to translate both elements using x and y instead of using top and left, like that you could control the transform origin point, which could be helpful.

 

But the best choice would be to tween the clip property of the container that holds the div with the sepia image, something like this:

#mainCont{
	width:400px;
	height:400px;
	background:#f0f;
	overflow:hidden;
}
#firstCont{
	width:400px;
	height:500px;
	background:#0FF transparent;
	position:absolute;
	overflow:hidden;
	clip:rect(0px, 400px, 500px, 0px)
}
#childElem{
	width:400px;
	height:400px;
	top:50px;
	left:50px;
	background:#00f;
	position:relative;
}
then the HTML:
<div id="mainCont">
	
    <div id="firstCont">
    
	   	<div id="childElem">alo alo</div>
    
    </div>
    
</div>
And finally the JS:
$(document).ready(function(){

var firstCont = $("div#firstCont"),
	child = $("div#childElem"),
	btn1 = $("button#btn1"),
	tn2 = new TweenMax.to(firstCont, 2, {clip:'rect(0, 0, 500, 0)', paused:true, repeat:1, yoyo:true}),
	tn1 = new TweenMax.to(firstCont, 2, {left:0, paused:true});

TweenMax.set(firstCont, {rotation:11, left:-41, top:-52});
TweenMax.set(child, {rotation:-11, top:50, left:50});

btn1.click(function()
{
	tn2.play(0);
});

});
You can see it in action here:

http://jsfiddle.net/rhernando/fFJ29/

 

Hope this helps,

Cheers,

Rodrigo.

  • 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.
×
×
  • Create New...