Share Posted May 7, 2022 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 More sharing options...
Author Share Posted May 7, 2022 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 More sharing options...
Share Posted May 7, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now