Jump to content
Search Community

Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload

tomividi test
Moderator Tag

Recommended Posts

I am new to gsap and scrolltrigger and I am trying to work on a scroll based website where panels overlap each other. I am trying to achieve a similar effect as seen on https://www.colabgroup.com (this seems to be a custom coded solution and not gsap based).

 

I am trying to fix the following issues:

  • How can I make sure that #panel-1 is shown first before the gsap animation is initiated and the browser window is at the top (as I am positionings other panels absolute, they overlap and only move away with a delay, as gsap loads)
  • In general how can I preserve scroll position and timeline position on refresh?
  • There seems to be a some scroll bar jumping when #panel-4 comes in, as this panel is taller than 100vh and is entering the viewport overlapping the previous panel from the bottom. How can i control this?

 

Thanks very much for any help on this.

 

My best,

Tomividi

See the Pen vYWjaRP by tvielmetter (@tvielmetter) on CodePen

Link to comment
Share on other sites

Thanks @Trapti, but I fail to see how your solution fixes any of the issues I am asking about. Also there are several flickering issues in your solution and content cannot be scrolled to on smaller screens. I appreciate any help with the stated issues in my original question.

Link to comment
Share on other sites

4 hours ago, tomividi said:

How can I make sure that #panel-1 is shown first before the gsap animation is initiated and the browser window is at the top (as I am positionings other panels absolute, they overlap and only move away with a delay, as gsap loads)

 

You would need to do that in your CSS to prevent FOUC.

 

 

test scrolltrigger sandbox (codepen.io)

 

4 hours ago, tomividi said:

There seems to be a some scroll bar jumping when #panel-4 comes in, as this panel is taller than 100vh and is entering the viewport overlapping the previous panel from the bottom. How can i control this?

 

The overflow of the container is messing with it. I would suggest reworking that last panel, like maybe removing if from the panel container, and just have the panel container with position fixed. That's what the site you linked to is doing.

 

4 hours ago, tomividi said:

In general how can I preserve scroll position and timeline position on refresh?

 

Fix the last panel and it should be fine. I only see it jump when you the last panel is visible and the ScrollTrigger has ended.

 

 

  • Like 1
Link to comment
Share on other sites

@OSUblake Thanks so much for your answer. The FOUC documentation has helped me in fixing the content stacking before the JS is initiated. I have integrated the fix in my original codepen.

 

15 hours ago, OSUblake said:

The overflow of the container is messing with it. I would suggest reworking that last panel, like maybe removing if from the panel container, and just have the panel container with position fixed. That's what the site you linked to is doing.

Thank you for your pointers regarding the scrollbar jumping with the last panel. I have tried a bit around with fixed state on the panel-wrapper and shifting the last panel out of the panel-wrapper, but was not successful.

Would you be able to further elaborate the approach you are suggesting? I feel like I am mostly just trying stuf out, as I have no proper concept of what is wrong here and how it would be done right.

 

Thanks again for your help, it is much appreciated!

 

 

Link to comment
Share on other sites

I was able to fix the issues in the original codepen.

 

The way I fixed this is that:

- I completely disabled pinning within ScrollTrigger

- made all overlapping elements fixed to top and with a negative z-index and wrapped by a relative container 300vh wrapping the fixed elements.

- I used then the wrapping container as the scrollTrigger container

- The 4th container receives a top margin of 200vh in order to time when it scrolls over the fixed elements (because the fixed elements have a negative z-index, this relative element scrolls over the fixed elements)

 

I am not sure this is the the best solution, as the content does not stack naturally if JS is disabled and it has limited accessibility, but at least the animation works properly without flickering and a browser reload also keeps the scrollposition/animation state properly, so anchor linking will work properly.

 

Thanks,
T

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...