Animating height + ScrollTrigger + anchor links

[zofia]

Hi,

in my project I use many different "dividers" which change their height when they enter and leave the viewport. I use SvrollTrigger for that but I can't force it to do what I want :). 

Everything has worked fine for me so far but recently I decided to add a table of contents to one of my pages. I use anchor links which should jump to their respective sections.  This is where the problem starts - the navigation does not lead me to the right sections. So, for example, if I click in the navigation on section 3 - it takes me to section 4 or somewhere between sections. 

 

For better understanding, the general concept of my website is here: https://gracious-brown-97593d.netlify.app

Maybe someone could help me find a solution? I made a minimal demo so you can look at it.

 

Thank you!

See the Pen xxrmpQE by zofiaifoz (@zofiaifoz) on CodePen

[OSUblake]

Hi zofia!

 

That looks a little tricky because your layout is changing while it's moving to the link, so the target might be at a different position by the time the page reaches it. You may have to do something like what is shown here with killWhenFast function.

 

 

[zofia]

1 hour ago, OSUblake said:

 

thanx @OSUblake, you are definitely right, I will read the thread you suggested and see if I can get it right.