Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Volt 22

Full page scrolling and pinning

Recommended Posts

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

 

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

 

  • Like 2
Link to comment
Share on other sites

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

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