Jump to content
Search Community

How to use TranslateZ?

kbeats 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

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

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