scrollTrigger not working in combination with transition CSS

[colehoward]

I'm trying to make a simple pin script, but when I add a transition property in my CSS, the particular box comes flying  in from the left whenever the trigger is started. If I remove this transition property, then the on hover property doesn't work. Does anyone know why this might be happening?

See the Pen gOgBYRY by howardcole (@howardcole) on CodePen

[GreenSock]

Welcome to the forums, @colehoward! 

 

First of all, thanks for providing such a wonderful minimal demo! I wish every forums post had one of those. It makes it sooo much faster and easier to know exactly what's going on. 🙌

 

I'd definitely recommend avoiding CSS transitions, especially on anything that will be affected by JavaScript. 

 

The reason it's doing that is because in order for ScrollTrigger to do its pinning magic, it must set the top/left values and do some calculations with getBoundingClientRect() to make it appear to stay stuck in the same spot. Here's a CodePen that simplifies the general concept into a setTimeout() that runs 500ms after the page loads (and doesn't use GSAP/ScrollTrigger):

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

 

When you have CSS transitions applied to all properties, it basically tells the browser "anytime something changes, don't make that change right away - instead, drag that out across X seconds". As you can imagine, if you animate something with GSAP and it has CSS transitions applied to it as well, GSAP will set the property to a new value 60 times per second, but the CSS transitions will jump in and try to make that gradual. It's not only bad visually, but it's craptastic for performance

 

Does that clear things up? 

[colehoward]

That makes  sense, thanks!