Issue with transformZ causing a 'jump' when animation finishes

[mikey123555]

 

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?

 

[GreenSock]

Welcome to the forums, @mikey123555. Sorry to hear about the trouble. 

 

It's virtually impossible for us to troubleshoot this blind unfortunately. Is there any way you could provide a reduced test case in codepen? We don't need (or want) the whole complex original project - perhaps you could just put together a few simple elements (boxes/divs) that deliver a similar effect? It's just too hard to guess at what's happening without being able to inspect things in the browser, analyze the code in context, etc. 

 

Have you tried doing a fromTo() tween instead of a set().to()? Are you using the latest version of GSAP? Does the same thing happen in all browsers or just one? Did you set a perspective on the parent so that z-positioning gets rendered? 

[mikey123555]

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!

[GreenSock]

I'm glad it seems to have been resolved now, though I'm very curious about exactly why. I suspect something else is at play. I kinda doubt it's GSAP-related though. 

 

Oh well - let us know if you need anything else. Happy tweening!

[mikey123555]

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