GSAP ScrollTrigger + ScrollTo + OffsetTop

[PanosAx]

I'm currently working on a header animation using GSAP's ScrollTrigger. While I've successfully set the initial offset top of elements below the header correctly, both before the animation starts and after it ends, I've encountered an issue during the animation itself. As I scroll through the animation, the offset top of these elements appears to fluctuate, resulting in an undesired effect.

Additionally, it's important to note that I've pinned the entire page, which might be contributing to this offset inconsistency. My ultimate goal is to obtain the correct offset top values so that I can utilize the scrollTo plugin effectively. Furthermore, I've found that ScrollTo with anchor tags doesn't behave as expected in this scenario.

 

Check the offset of h2 on the pen to understand my issue

See the Pen PoXeRoQ by FrontEndPanos (@FrontEndPanos) on CodePen

[Rodrigo]

Hi,

 

You are animating the height of the container and you are also animating the font size of that <h1> element, a change in the offset top value is totally expected. In fact, considering what you are doing right now, if the offset top value didn't change at all would be totally unexpected.

 

Keep in mind that changing the height of an element that also affects the document height, pretty much throws off the board every calculation ScrollTrigger makes, so most likely any ScrollTrigger instance that is created after this one will be affected by the change in the document's height.

 

The one solution I can see in this case is, given the fact that you are animating the height between known values (from X pixels height to Y pixels height) you can offset your following ScrollTrigger instances, or your calculations used in the ScrollTo plugin by that amount, in order to correct that height change in the document.

 

Hopefully this helps.

Happy Tweening!