Jump to content
GreenSock

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

How to use TranslateZ?

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

Hi there,

 

I'm trying to figure out how to properly use translateZ to have an object appear above another object when tweened in front of it. I'm using GSAP in an Adobe Captivate project, in which I have no idea if tweening the Z index is even possible, but I thought I'd give it a whack in codepen first and then see if it works in Captivate. 

 

Essentially in my project I have two images that I would like to 'zoom' when the user clicks on them, and then return to their original position when they click on them again. The issue is that they are in different Z space and one will always be behind the other, so I'm wondering if I can animate the Z index so that when the photo is 'zoomed' it will always be in front of the other. 

 

This was my attempt at it in codepen, when I tried adding in translateZ it broke the code: 

See the Pen mGqLKJ by kbeats (@kbeats) on CodePen

 

and if it's helpful at all this is what my code in Adobe Captivate looks like -

 

var image19 = document.getElementById("Image_19c");
var tl = new TimelineMax({paused:true, reversed:true})
tl.to(image19, .8, {transform: translateZ(100px), x:-160, y:-180, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut});

var image18 = document.getElementById("Image_18c");
var tl_2 = new TimelineMax({paused:true, reversed:true})
tl_2.to(image18, .8, {x:-160, y:80, scaleX:1.8, scaleY:1.8, ease:Quad.easeInOut});

window.addEventListener("mousedown", function(e){
if(e.target.id == "Image_19"){
tl.reversed() ? tl.play() : tl.reverse();
}
});

window.addEventListener("mousedown", function(e){
if(e.target.id=="Image_18"){
tl_2.reversed() ? tl_2.play() : tl_2.reverse()
}
});


 

Thanks! 

 

 

 

See the Pen mGqLKJ by kbeats (@kbeats) on CodePen

Link to comment
Share on other sites

You can certainly set the z-index as part of the animation. Here's an example I made as an answer to another forum question.

See the Pen xLOKXm by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Thank you! This is very helpful, but I'm still having some troubles with it. Is there anyway to set the Z index with just javascript and without using any CSS? 

Link to comment
Share on other sites

See the Pen mGqLKJ by kbeats (@kbeats) on CodePen

 

Here's where I'm at. I'm not sure why the first box still isn't covering up / going in front of the second box? 

Link to comment
Share on other sites

You have a typo on line 11 of your CSS:

 

 position:aboslute;

 

Fix that and you'll be good to go. :)

 

 

See the Pen NLMLOV by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

It happens to all of us. :)

 

Let us know if you have any more problems. Happy tweening.

:)

 

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