transitions from scss interrupt animations from gsap

[_urafi]

Hello guys, i still confuse how to used it.

If i use transition in my scss code, it will interrupt the animation of the gsap and make it look like there are 2, the animation returns to the starting position and then returns to the target position. Does anyone know the solution. 

 

*I also have additional problems

when I was hovering one of the .cards, the other .card that was not hovered actually moved its position following the .card that was being hovered, I hope you can help me. Thank you very much

See the Pen WNPoJEY by Rafi-rizqullah-ramadhan (@Rafi-rizqullah-ramadhan) on CodePen

[GreenSock]

I noticed several problems: 

1. You should never apply CSS transitions to the same elements that you're animating with GSAP. They interfere. Every time GSAP makes a change (60 times per second), the CSS transition interrupts and says "NOPE! I won't allow that change to happen yet...I'm gonna drag that out over x-seconds..." which is very bad for performance too. 
2. You've got CSS issues, like you're using flexbox that centers things vertically but it sounds like you want them aligned top, right? 
3. Don't apply scroll-behavior: smooth to a page that uses ScrollTrigger/ScrollSmoother. 
4. You didn't load ScrollTrigger or ScrollSmoother
5. You didn't have a wrapper or content div for your ScrollSmoother
6. I'd recommend using GSAP to do your rollover animations too instead of using CSS transitions

See the Pen qBgqyoe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[_urafi]

On 11/5/2023 at 1:35 PM, GreenSock said:

I noticed several problems: 

1. You should never apply CSS transitions to the same elements that you're animating with GSAP. They interfere. Every time GSAP makes a change (60 times per second), the CSS transition interrupts and says "NOPE! I won't allow that change to happen yet...I'm gonna drag that out over x-seconds..." which is very bad for performance too. 
2. You've got CSS issues, like you're using flexbox that centers things vertically but it sounds like you want them aligned top, right? 
3. Don't apply scroll-behavior: smooth to a page that uses ScrollTrigger/ScrollSmoother. 
4. You didn't load ScrollTrigger or ScrollSmoother
5. You didn't have a wrapper or content div for your ScrollSmoother
6. I'd recommend using GSAP to do your rollover animations too instead of using CSS transitions

 

 

 

Does that help? 

Thank you so much, this really really helped me