[CSS Transition kinda messed up the way container animation works]

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

[CSS Transition kinda messed up the way container animation works]

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