Jump to content
Search Community

Change the z-index for currently animated div

Hajad test

By Hajad
in GSAP

Moderator Tag
 Share

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

Hajad test

Hajad

Posted
Posted

How (if possible) can i change the depth of a div so that the one currently animated is on top of the others. I have a simple example here...

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#rB{
position:absolute;
left:50px;
width:100px;
z-index:1;
}
#gB{
position:absolute;
left:160px;
width:100px;
z-index:2;
}
#bB{
position:absolute;
left:270px;
width:100px;
z-index:3;
}
</style>
<script type="text/javascript" src="TweenMax.min.js"></script>
<script>
function init(){
var redBox = document.getElementById("red");
var greenBox = document.getElementById("green");
var blueBox = document.getElementById("blue");
/*TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150});
TweenMax.to(blueBox, 1.5, {width:150});*/
TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150,delay:1.5});
TweenMax.to(blueBox, 1.5, {width:150,delay:3});
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150});
tl.to(blueBox, 1.5, {width:150});*/
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150},-0.5);
tl.to(blueBox, 1.5, {width:150},-0.5);*/
}
</script>

</head>
<body onload="init()">
<div id="rB"><img src="red.gif" id="red" /></div>
<div id="gB"><img src="green.gif" id="green" /></div>
<div id="bB"><img src="blue.gif" id="blue" /></div>
</body>
</html>

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Yes, you can change the z-index manually with a .set() but GSAP won't do that automatically.

note the property in the tween is zIndex.

 

here is an example: http://www.snorkl.tv/dev/shortRotation/zIndex.html

 

core code

 

 


.box{
position:absolute;
width:100px;
height:100px;
}

#red{
background-color:#900;
top:50px;
}

#blue{
background-color:#03C;
}


<div class="box" id="red"></div>
<div class="box" id="blue"></div> 




var tl = new TimelineMax({repeat:-1, yoyo:true});
tl.to($('#blue'), 1, {css:{left:'100px'}})
 .set($('#red'), {css:{zIndex:1}}) // set is basically a 0-second duration tween
 .to($('#red'), 1, {css:{left:'100px'}});

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...