[Issue with transformZ causing a 'jump' when animation finishes]

Yeah I was really curious too, and most likely not GSAP related as you assumed. Thanks for such a great library!

[Issue with transformZ causing a 'jump' when animation finishes]

Hey, so really weird but the problem isnt happening anymore? All I did was turn off and on some of the CSS properties I set, and for some reason the jump isnt happening anymore. This was a prevalent issue for a while but It seems like it may be a random glitch that happens once in a while.

 

I'll ask again if it comes up later!

[Issue with transformZ causing a 'jump' when animation finishes]

 

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?