JelmerOT

Figured it out. The blocks/sections above the pinned section had lazyloaded images, which when loaded, changed the document height. That changed the top position of the pinned section which resulted in a wrong sticky/pinned starting position. We made sure the height of the images are always present, so that the document height doesn't change.

Hello, I seem to have an issue with a pinned section. Here's the demo website (password: sesam): dev.orangetalent.nl/over-ons. The section with the issue has a title of "Onze vier beloften voor écht succes" and an autoplay accordion, it supposed to be pinned and the contents should be vertically centered within the screen. But with markers enabled the start starts in the wrong position. The same section is found on the homepage, where this problem does not exists. Might it have to do with the animated sections above?

Thanks! I got it working with your example, adding a seperate timeline for the title and adjusting the window.innerHeight multiply value. Fijn weekend!

That is amazing work, @mvaneijgen! Thank you for this. I believe I got it working with two timelines. Except I'd like to change the duration of the images timeline, but reducing the duration changes the space between aswell. Any idea how to reduce animation speed but keep the space between?

Goodmorning! I've been struggling for a while now to get this animation to work: https://codepen.io/JelmerOT/pen/ZEwPzYQ?editors=1010 What it's supposed to do is: Start the title animation before the section is pinned, that way I reduce the time the empty black space is visible between the first and second sections. The images should start animating/scrolling when section is pinned The images should all have been visible before going to next section Been trying to calculate heights for these images and adjusting the `end` in ScrollTrigger, but no luck so far. The images can vary from amount, so I can't just adjust the bottom to something like `+=3000` I would love some advice/help!