Jump to content
Search Community

CSS Transition kinda messed up the way container animation works

yeajj test
Moderator Tag

Recommended Posts

i was using the same technique shown in the demo to make a horizontal scroll section for my website, smoothing out the scroll was a very tricky concept to wrap my head around since the other plugins i tried to use 'hijacked' the scrolltrigger animation, so i figured that the horizontal scrolling effect was transform based and i tried to apply a plain CSS easing to it (cubic bezier) it worked perfectly but the other scroll based animations stopped working !!

in the pen above there's the gsap demo, the only thing i've added was the transition property to the [.panel] sections.

the same problem occured and the boxes aren't animating no more, i would really really appreciate getting help, thank you in advance!

See the Pen jOZWBKO by yeaj (@yeaj) on CodePen

Link to comment
Share on other sites

okey i messed around with it for a bit but i kinda got it?

i noticed that if i applied the transition property after loading the website on DevTools everything works just fine, so i made a function that applied the transition property with a delay, but i still don't get why this is the case... here's the same pen with the changes i mentioned

 

See the Pen MWQKvyg by yeaj (@yeaj) on CodePen

Link to comment
Share on other sites

That's probably because CSS transitions prevent changes from happening immediately, so when ScrollTrigger does its measurements (a part of which involves pushing the containerAnimation to its end to see how far it moves), the CSS Transitions totally get in the way. So if you element.style.translate = "translateX(-500px)", and then check element.getBoundingClientRect() for example, it wouldn't show any movement whatsoever.

 

You should never apply CSS transitions to the same properties/elements that GSAP is animating. It's terrible for performance and they conflict. There's never a reason to do so anyway - if you're going to animate it, just use GSAP. 

  • Like 2
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...