ScrollTrigger pinned panels: first panel misaligned after page refresh (scroll restore)

[Kins]

Hi,

 

I created a minimal reproduction of a stacked panels effect using multiple pinned elements with `pinSpacing: false`.

The effect works correctly while scrolling normally.

 

However, there is an issue when refreshing the page while being inside the stacked section:

 

- Panels 2, 3 and 4 remain correctly positioned
- Only the first panel gets misplaced and appears to restart from inside the stack

Important notes:
- Panels have variable heights
- There is a section before and after the stack
- No scale animation is used, only vertical stacking
- Each panel is pinned individually with `pinSpacing: false`

 

⚠️ Note about reproduction:
This issue is related to scroll restoration on page reload.  
It is not always reproducible inside the standard CodePen preview because it resets the scroll position.

To properly reproduce:
1. Open the demo in a standalone page (or locally)
2. Scroll into the stacked panels (around panel 2 or 3)
3. Refresh the page
4. The first panel will be misplaced

 

Here is the demo:

 

 

I would like to know if this behavior is expected with this pattern, or if there is a more robust way to structure the ScrollTriggers.

Thanks!

I can also provide a standalone HTML file if needed.

See the Pen vEXVBgg by Kinsi (@Kinsi) on CodePen.

[Rodrigo]

Hi @Kins and welcome to the GSAP Forums!

 

I tried your demo in the debug view (no iframes) in order to replicate the normal browser behaviour, I also downloaded it and tried in my local machine using a live server and I haven't been able to replicate this 😞

 

What you could try is ScrollTrigger's clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Hopefully this helps

Happy Tweening!

[Kins]

Hi, thanks for testing it in debug view and locally.

I also suspected this might be related to scroll restoration rather than the pin logic itself.

I’ll test ScrollTrigger.clearScrollMemory() in my actual project setup and see if it improves the refresh behaviour.

What makes this case difficult is that I’m also seeing similar refresh inconsistencies on other scroll-based sections, not only on the pinned panels, so it may indeed be environment-specific or related to how scroll restoration interacts with the page as a whole.

Thanks again for checking.

EDIT: no luck with ScrollTrigger.clearScrollMemory() sadly. Only thing that works: refresh and put back at the top of the page.

[Kins]

Following up on this, I created a minimal reproducible example.
 

I simplified everything and shared a small project with HTML, CSS and JS files that reproduces the issue.

The problem still occurs when refreshing the page while being in the middle of the scroll (not at the top).

You can test it by:

Opening the page
Scrolling into the stacked panels section
Refreshing while in the middle

The first panel becomes misaligned after refresh.

Also, the animation of the mobile elements (non-pinned ScrollTrigger) shows inconsistent positioning after refresh as well.

Let me know if you need anything else.

ScrollTrigger refresh bug test.zip

[Kins]

Hi,

I’m currently exploring a new lead.

It looks like there might be a conflict with Bootstrap affecting the calculations, especially during refresh.

More specifically, I suspect this could be related to scroll-behavior: smooth applied on the html element, which might interfere with how ScrollTrigger restores and recalculates scroll positions.

I’m still investigating this to confirm and will report back once I have more precise results.

Just wanted to share this direction in case it helps.

[Rodrigo]

Ahh yes, that is a known issue. Your demo unfortunately didn't use Bootstrap and I forgot to mention it as a probable cause.

 

You definitely want to override that using this in a custom CSS:

html {
  scroll-behavior: auto !important:
}

Hopefully this helps

Happy Tweening!

[Kins]

Hi,

That seems to fix the issue on my side

You're right, I should have mentioned Bootstrap earlier — that was my mistake.

The scroll-behavior: smooth was indeed causing the issue on refresh.

Thanks a lot for your help!