Jump to content
Search Community

Pinning and scrub once but without whitespace?

skadoosh test
Moderator Tag

Go to solution Solved by SteveS,

Recommended Posts

I'm working on something that look similar to this codepen [locomotiveScroll + ScrollTrigger]. All scrub and pin work perfectly on orange section until I add "once:true" this will leave white space 100% viewport as we setup in end parameter and push orange section under pin's whitespace. I believe that this is how scrub and pin spacing work. What I really want to do here is to improve UX in my app by stop scrub animation when it onComplete or play animation once just like how I add "once:true" but want to acheive this without pin's whitespace. I'm not sure about the pinType either since I use locomotiveScroll with scrollTrigger, this force me to use pinType as transform instead of fixed. I have tested it without locomotiveScroll but whitespace still remain so I believe it's not the caused of whitespace. Any suggestion on this? Thanks in advance 

See the Pen wvybNPd by skadooshmp (@skadooshmp) on CodePen

Link to comment
Share on other sites

  • Solution

There's a lot going on here and there are several other threads on the matter but they are mildly dated.

General process:

  1. When the pin completes, kill the scrollTrigger. This will:
    1. Reset everything the scrollTrigger did
    2. remove the pin spacer
  2. Since removing the pin spacer changes the page height, we need to manually set our scrollPos to where we want it, in this case where the pin section takes the full page. Locomotive scroll has its own utility for this.
  3. Since we killed the scrollTrigger, we have to set the end state of its animation

 

Here is a codepen:

See the Pen QWQRPJE by SteveSDaBest (@SteveSDaBest) on CodePen

 

I recommend using GSAP's ScrollSmoother instead of locomotive scroll, as it uses native browser scroll which can make things easier, plus it has seamless integrations with ScrollTrigger.

  • Like 3
Link to comment
Share on other sites

 

Some sidenotes to what @SteveS said:

  • for a very long time, locomotive-scroll didn't have a method to set the scroll-position without lerp being applied - now it looks like it has, but you will need to update the loco-scroll version (as Steve did to version 4.1.4)
     
  • Instead of killing the ScrollTrigger, you could also disable it and then set the animation's progress to 1 - which could come in handy if you e.g. had a lot more values that you had been tweening on earlier and setting each and everyone to the final state manually would get a bit cumbersome.
     
  • You will still notice a flash/jump of some sorts when all that happens - which from what I can tell is related to locomotive-scroll (and probably its scrollTo method) as that flash doesn't happen in examples without locomotive-scroll. But locomotive-scroll is not a GreenSock product and thus it is not really supported here - so as Steve suggested, maybe have a look at Scrollmoother instead.

 

See the Pen yLvWrdX by akapowl (@akapowl) on CodePen

 

 

 

Most of what I did there was discussed in one way or another in the threads linked in this post earlier:

 

 

...with the first thread linked in there probably being the most complete approach.

 

 

  • Like 3
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...