StartTrigger differs on elements with pre-defined css vs gsap.set() (css transform)

[semplicelabs]

Hi everyone

 

In my codepen you can see that the start trigger of an element will be different if you set your initial values in css compared to setting them via gsap.set(). (using css transform) Normally i would completely ignore this but in my single page app i have to set the initial values via CSS otherwise i will get a content jump because the content is already visible when gsap.set() gets used.

 

What i bascially want is the behavior of the second pin (it perfectly ends on top and it looks like the css transform "start" scale gets ignored for the start trigger) but with initial values set in css. We made the switch from scrollMagic to scrollTrigger which went great so far and there are only a few small issues left like this. (in scrollMagic it always behaved like version 2) I hope we just overlooked something obvious like the last time.

 

Summarize:  I want GSAP to not account for the transform properties set via CSS when calculating the start position

 

Thanks a lot in advance for any help!

See the Pen bGeXjor by paperboy (@paperboy) on CodePen

[mikel]

Hey @semplicelabs,

 

From the DOCS

 

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

 

See the Pen XWKvGjx by mikeK (@mikeK) on CodePen

 

And another option: Removing a Flash of Unstyled Content (FOUC)

 

Happy pinning ...

Mikel

 

[semplicelabs]

Hi @mikel

 

thanks a lot for your help! It's always nice to have 2 options.  I think i will go with the wrapper option!

 

Thanks again!

 

Best,

mike