How do I make the gsap and scss animations not conflict?

[AlexanderGS]

There is an animation created in SCSS for an element using @keyframe, and there is an animation from gsap. Both use transform: translate, which is the problem. How can I set up the animation from gsap and scss to behave adequately so that they work properly?

 

 

See the Pen oNMLqVo by Alexxxsander (@Alexxxsander) on CodePen

[Rodrigo]

Hi,

 

Sorry that is just not going to happen like this, it's simply impossible. As you can see GSAP sets values to animate to the image's natural position but the CSS keyframes are already working so while the opacity is applied and animated the transform animation on the Y axis is override by the CSS keyframes.

 

I'd suggest to stick to just using GSAP or CSS animations. I think using just GSAP is simpler and requires less hassle:

See the Pen JjBKZqo by GreenSock (@GreenSock) on CodePen

 

Also you can use and configure keyframes in GSAP if you're more comfortable with that way:

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[AlexanderGS]

Good afternoon! @Rodrigo
Yes your option helped!
But a new problem has arisen. If I set a fixed height: 600px; for the image. Then a value of -270px is added for transform3d. This value depends on the height. For example, if I set the height : 300px, then translate3d(0px, -135px, 0px). So the value is divided by almost 2. Why does this happen?

SCSS

.slide-preview-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 258px;
  height: 600px;
  max-height: 600px;
  object-fit: cover;
  z-index: 10;
}

GSAP

gsap.set(".slide-preview-image", {
        yPercent: -45,
        xPercent: -50,
      });

      gsap.timeline().from(".slide-preview-image", {
        delay: 2,
        duration: 1,
        opacity: 0,
        y: -300,
        ease: "power2.easeInOut",
        scrollTrigger: {
          trigger: ".slide-preview-image",
          toggleActions: "play none none none",
        },
      }).to('.slide-preview-image', {
        repeat: -1,
        yoyo: true,
        yPercent: -60,
        duration: 2,
        ease: "power2.easeInOut"
      })

[Rodrigo]

Hi,

 

That is because percentage-based transforms (xPercent and yPercent) are determined by the element's dimensions (width and height), so in this case if the image's height is half then the pixel amount of the transform would change in that particular proportion as well.

 

Is just simple math:

// 45% of the height
600 x 0.45 = 270

300 x 0.45 = 135

I'm using 45% of the height since the initial transform being applied is 45% (yPercent: -45).

 

Hopefully this clear things up.

 

Happy Tweening!