Full page scrolling and pinning

[Volt 22]

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]

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]

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]

 

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]

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

[Joshua Frank]

I want to do something very much like the demos shown here, within a page, but to have an animation start when the page activates, and if you keep scrolling, it animates until that completes, and after that the next page scrolls into view.

 

What would be the best way to set up independent animations like this? Thanks for any help on this.

[GSAP Helper]

Hi @Joshua Frank and welcome to the GSAP forums!

 

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 Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. 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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[changning]

On 1/17/2022 at 9:50 PM, Volt 22 said:

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.

Can you tell me how you achieved the fixed effect on the first page? When the page happens to scroll

[GSAP Helper]

Hi  @changning and welcome to the GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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