Search the Community

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: https://codepen.io/Kinsi/pen/vEXVBgg 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.

Hello everyone!? I’m looking for solutions how could stop playing animation on the page refreshes? So, in demo the animation of text works correctly if you set counter to the max value animation is showing with gsap animation. But if you refresh page the animation keep playing. I tried to add flags in localStorage, but this is just stop any animations also I tried the flags as state and add timeline.revert() at the start of load and then make it as .play(). Could anyone to advise something , please? Please, look into this: minimal demo. Thanks a lot! Hideakimaru