ScrollTrigger markers are off when any element above it changes height

[kohlej]

Hi guys, here is a demo where I reproduced the problem.

Markers of H1 element are off the same amount as the other section element above it changed it's height(padding top and bottom) before it.
 

By markers I also mean the start and end point of actual animation. 

Any way to avoid this?

PS.
Thank you for creating this awesome plugin! It's awesome

See the Pen OJMLKNp by artyor (@artyor) on CodePen

[ZachSaucier]

Hey kohlej. In general it's not good to animate non-performant properties like height and padding. 

 

With that being said, if you change the position of an element with a ScrollTrigger you'll need to make ScrollTrigger refresh.

onComplete: () => ScrollTrigger.refresh()

 

[kohlej]

49 minutes ago, ZachSaucier said:

Hey kohlej. In general it's not good to animate non-performant properties like height and padding. 

 

With that being said, if you change the position of an element with a ScrollTrigger you'll need to make ScrollTrigger refresh.

onComplete: () => ScrollTrigger.refresh()

 

Hi, I will try to acomplish it with this. 

Yes Im aware that manipulating height/padding is not the ideal, but it was some unique animation I wanted to create.

Thank you