Jump to content
Search Community

mikey123555

Members
  • Posts

    3
  • Joined

  • Last visited

mikey123555's Achievements

2

Reputation

  1. Yeah I was really curious too, and most likely not GSAP related as you assumed. Thanks for such a great library!
  2. 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!
  3. 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
×
×
  • Create New...