Jump to content
GreenSock

Alberto Plebani

ScrollTrigger with pin with page longer than viewport

Recommended Posts

Hello, i have great difficulties in creating a simple scroll experience like the one here  but i0d like to have some slides with content longer than the viewport. My problem is that when content is longer, it is truncated and not shown.

And as a bonus, i'd like to have it working on mobile with the browser bar that doesn't disappear so UX is not ruined.

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Welcome to the GSAP forums, Alberto.

 

For the layered pinning working with sections that are taller than the viewport, have look at the threads linked in the post below. 

 

Just note, that if you mix sections of different heights, you will have to properly adjust the calculations for how to snap, then.

 

 

 

 

1 hour ago, Alberto Plebani said:

And as a bonus, i'd like to have it working on mobile with the browser bar that doesn't disappear so UX is not ruined.

 

And for this, having a look at ScrollTrigger.normalizeScroll() might help.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

This is from the docs. I hope it will help. Happy tweening! :) 

  • Address bar showing/hiding on mobile browsers, resizing the viewport - have you ever noticed a sudden shift after the address bar shows/hides? That's because the when the viewport resizes, ScrollTrigger must recalculate the start/end positions and they likely change at the new viewport size (hence the jump). It's logically impossible to keep things accurate in terms of trigger positions AND avoid any changes. This isn't a bug in ScrollTrigger. You could prevent it from recalculating (see config()) but then your trigger positions become inaccurate.

 

  • Like 3
Link to comment
Share on other sites

Thank you very much, i implemented both strategies and was able to solve the needs! Thank you very much for your quick support.

I have to say i have a jerky scrolling on my mobile device and i think it's quite strange since https://artsexperiments.withgoogle.com/meroe/ has smooth transitions between sections (but maybe it is due to the fact i don't have a snap effect and scroll is commanded by the user)

 

Link to comment
Share on other sites

Ah ok - That's not actually using scroll at all! Different technique
 

They're just observing mouse/touch events and then progressing an animation, our observer plugin can help you with this and there's a similar demo on this page.

https://greensock.com/docs/v3/Plugins/Observer

  • Like 1
Link to comment
Share on other sites

Hello, i've implemented the suggestions you provided but on mobile, especially android devices, i'm experiencing small jumps when pinning/unpinning happen. I've read that ScrollSmoother should solve the issue and i'd like to test it but before buying the license i'd like to test it.

I'm developing a proof of concept in react using Gsap. Is there any way i can test locally the ScrollSmoother library before buying the license?

Link to comment
Share on other sites

 

You can test it locally via the GSAP-trial package.

 

https://greensock.com/docs/v3/Installation

 

Quote

All the bonus plugins are available to test-drive on CodePen, CodeSandbox and locally via our GSAP-trial package. Once you're done experimenting - join Club GreenSock to get full access!

 

https://www.npmjs.com/package/gsap-trial

 

Link to comment
Share on other sites

I installed the trial but adding ScrollSmoother breaks react rendering :(

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Sorry for the late reply, here it is the codesandbox: https://codesandbox.io/s/crimson-fire-pgvln0?file=/src/Page2.js

The rendered page behaves exactly as i wish. On Desktop and ios experience is great but testing with some android older models (even if not older than a couple of years) the experience is awful since when pinning/unpinning the page "jumps".

I'm not using ScrollSmoother here. Can you tell me:

1) is there something i can do to have better and smoother android experience?

2) does ScrollSmoother allow me to obtain better results? If so how can i add it?

 

To be honest: https://feature.undp.org/wilderness-of-water/ is a kind of experience i'd like to replicate and it doesn't "jumps" when scrolling even on android devices

 

Thanks in advance for your really outstanding support

Link to comment
Share on other sites

I would recommend trying ScrollSmoother. Since that does all of its movement via JS, you probably won't see any "jumping" which is caused by the fact that most browsers handle scroll repainting on a totally different thread, so it scrolls the page as if it wasn't pinned and THEN (a few milliseconds later) it fires the JS and ScrollTrigger pins it (hence the jump). 

Link to comment
Share on other sites

I've updated the sandbox introducing scrollsmoother but as you can see (https://codesandbox.io/s/crimson-fire-pgvln0?file=/src/Page2.js) rendering with pinning has been completely broken. Can you tell me what is wrong?

 

Here it is the original sandbox without scrollsmoother: https://codesandbox.io/s/practical-leavitt-w82fmp with the desired pinning experience.

Link to comment
Share on other sites

It looks like you forgot to wrap the content in a wrapper <div> and content <div> as instructed in the docs

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

Also, make sure you're creating your ScrollSmoother in your useEffect() so that it doesn't constantly get recreated on every single render. Seems to work fine when I fix those problems. 

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.
×