Full page scrolling and pinning

[Volt 22 1 Likes (Newbie)]

Hello,

 

Newbie alert!

I want to achieve a scroll snapping and pinning effect on a website, something similar to what is used on this website - https://skolkovoforbusiness.ru/features/#landscape.

 

I want each section to scroll into 100vh, and to pin. I don't want a user to scroll through several sections at once. I have been able to achieve the snapping effect with help from this community but I can't figure out how to make it pin, and not scroll multiple sections at once. This is my website - https://everwin.webflow.io/.

 

Thanks in advance.

[akapowl 4,411 Likes (Superhero)]

Hello there, @Volt 22

 

As the forum guidelines state, we can not troubleshoot live websites, as there is just too much involved with that. If you do have GSAP specific questions and ideally post a minimal demo alongside your question, you'll immensly increase your chances of getting a solid answer and be helped.

 

If you want to re-create the effect on that website you linked as a reference, I honestly don't think, ScrollTrigger would be the best tool of choice, as it very much looks to me, like they are not basing things off of normal scroll-behavior at all, but are probably listening to the neccessary events like mouse-wheel scroll, key events etc. and animate things based on those - similar to what these following examples do (one of them even has a very similar effect going on).

 

Maybe they can help getting closer to what you want to achieve. Happy tweening!

 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

 

See the Pen MzWzyv by PointC (@PointC) on CodePen

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

[Volt 22 1 Likes (Newbie)]

Hello @akapowl,

 

Thanks for your swift response. The part on posting a minimal demo is well noted. 

Also, the examples given are ideal, the first one suits my use case perfectly, however,  I noticed it scrolls infinitely, any suggestions on how to disable infinite scrolling from that example?

[akapowl 4,411 Likes (Superhero)]

 

You would have to adjust the logic a bit - and I think it should be enough to change the logic of the handleDirection() function.

 

I changed ...

// ...this...

function handleDirection() {
  
  listening = false;

  if (direction === "down") {
    next = current + 1;
    if (next >= sections.length) next = 0;
    slideIn();
  }

  if (direction === "up") {
    next = current - 1;
    if (next < 0) next = sections.length - 1;
    slideOut();
  }
  
}


// ...to this...

function handleDirection() {
  
  listening = false;

  if (direction === "down") {    
    if( current !== sections.length - 1) {      
      next = current + 1;
      slideIn();      
    } else {
      listening = true;
    }      
  }

  if (direction === "up") {   
    if( current !== 0) {    
      next = current - 1;
      slideOut();    
    } else {
      listening = true;
    }    
  }
  
}

 

 

 

...and it appears to be working quite alright.

 

I only tested with mouse-wheel though, so you might want to check for touch-devices yourself (and might have to incorporate some logic along those lines if it doesn't work well).

 

Hope it helps a bit though.

 

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

 

[Volt 22 1 Likes (Newbie)]

Many thanks @akapowl, you've been very helpful.