Hi, I noticed an issue with animating the z direction using TimelineMax.
This is a snippet of an image on my screen. Note that it is wrapped in a parent container which I am animating the z-axis.
.BgImage {
display: block;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
perspective: 30rem;
transform-style: preserve-3d;
transform: translateZ(0);
width: 100%;
height: 100%;
&__Shape {
display: block;
position: absolute;
transform: translateZ(-250px);
transform-style: preserve-3d;
backface-visibility: hidden;
height: 75rem;
object-fit: cover;
&__Image {
display: block;
position: absolute;
transform: translateZ(0);
transform-style: preserve-3d;
backface-visibility: hidden;
width: 40rem;
This is a snippet of the parent container...
.Project {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
transform: translateZ(0);
This is the timeline animation I am doing on the parent container...
Note that params[direction] basically just sets the z: 1000 to z: 0 respectively.
this.tlAppear
.set(this.projectEl, {...params[direction].set})
.to(this.projectEl, 1, {...params[direction].to, ease: Expo.easeOut}, 0);
I've attached a short GIF of what I'm talking about, since I feel it would be too complex to recreate in a Codepen.
As you can see, there is a slight 'jump' once the animation completes, where for some reason it appears the Shape element and Image element jump into their -250px and -100px z-transforms (even though they arent directly being animated).
Ive been having trouble with this for a while now so Id appreciate any help...
EDIT: When I slow down the this.tlAppear.to to examine the animation more closely, it looks like the CSS z-translate values for the images are not applied until the animation completes...Why is that?
z-transform-cropped.mp4