Jump to content
Search Community

transitions from scss interrupt animations from gsap

_urafi test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • _urafi changed the title to transitions from scss interrupt animations from gsap
  • Solution

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? 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...