Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
duty47

Smooth scroll Vertical/Horizontal

Recommended Posts

Hi,
I have recently started learning animation on the scroll, but I have a problem that I cannot solve.
I made a very simple block layout.
Using the well-written SmoothScroll class by Blake Bowen https://codepen.io/osublake/pen/vvRWQd  
I would like to expand it a bit to be able to scroll horizontally.
I would like it to work like this:
scrolls down the page normally until block number 5, when block number 5 touches the top of the screen it blocks and scrolls to the right until block number 7 and then again scroll down from block 8 to the end of the page. Back, it looks the same only in reverse order.
 

However, I was able to do something like this on a normal scroll and not on a transform.
 

I am asking for help with this. Thanks

Sorry for my English :[

See the Pen RwwNKBg by duty47 (@duty47) on CodePen

Link to post
Share on other sites

Hello and welcome to the GreenSock forums.

 

I was hoping that @OSUblake would respond to this given you're using his script but he appears to be busy doing other things.

 

This seems like you will need to 

  1. Limit the original scroll section to the bottom of the 5th section.
  2. When it is at that limit, if the user continues to scroll, disable the original scroll behavior and start scrolling horizontally instead.
  3. Once the page has been scrolled to the far right of the 6th section, enable vertical scrolling again (but this time shifted over by 100vw units).
  4. Same thing as 1. but for the 7th section.
  5. Same thing as 3. but for the 8th section.
  6. Enable the original scroll behavior again.
  7. Limit the scrolling up to the top of the 8th section, similar to 2.-3. above.

Or you could use a tool that does this sort of thing for you. I think ScrollMagic does this sort of thing, but I don't use so I can't give you much instruction there.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

That smooth scroll script I wrote won't work well for switching scroll directions. ScrollMagic is probably the best way to do that without coding a custom solution, but I don't use ScrollMagic, so I can give you much help either. The only thing I do know is that smooth scroll is incompatible with the way scroll magic works.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

@OSUblake @ZachSaucier
Thank you for your help
I think I have an idea how to do this thanks to your tip and after I checked how scrollmagic works.
I am asking you @OSUblake for help only when you find time in it:
-that when the horizontal-scroll-wrapper touches the top of the screen it stops transforming on the scroll-container and starts again when the horizontal-scroll-wrapper touches the bottom of the screen.
I edited your class a bit
I added horizontalScrollWrapper and horizontalScroll to the options

Thanks,
Again, sorry for my English

Link to post
Share on other sites
11 minutes ago, duty47 said:

Again, sorry for my English

 

Your English is fine. ?

 

11 minutes ago, duty47 said:

I am asking you @OSUblake for help only when you find time in it:
-that when the horizontal-scroll-wrapper touches the top of the screen it stops transforming on the scroll-container and starts again when the horizontal-scroll-wrapper touches the bottom of the screen.

 

Sorry, but I really don't have a lot of free time to work on this right now. I'm thinking that it might be possible to keep it from scrolling using position:sticky. Kind of like this.

 

See the Pen 41a997ea6297132313629b608d0ba39f by osublake (@osublake) on CodePen

 

Although I'm not sure how you can determine if an element is sticky.

  • Like 2
Link to post
Share on other sites
8 minutes ago, ZachSaucier said:

 

Nice find! Never knew about that event, although I just did a quick test, and it looks like sticky doesn't work with the smooth scroll. :sad:

 

I'm guessing it's because the element technically isn't being scrolled. It's being translated in another container.

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Hey @duty47,

 

Would you mind posting the approach that you figured out? Another user is asking about a similar effect.

Link to post
Share on other sites

@ZachSaucier @OSUblake
please help, there is an error on the edge and safari and the script does not execute.
SCRIPT1005: Expected '(',
It points to arrow functions like this: _onScroll = (event) => {

What could I replace to make the script work the same.
When I change to normal functions and adds this as a parameter in some places, errors are gone, but something is still wrong.

Link to post
Share on other sites

Safari and Edge probably don't support declaring properties outside of the constructor yet.

 

You would either need to declare functions inside of the constructor.

 

conststructor() {

  ...
  
  this._onScroll = (event) => {
    this.scrollRequest++;
    if (!this.requestId) {
      this.lastTime = performance.now();
      this.requestId = requestAnimationFrame(this._update);
    }
  };
  
  this._onResize = (event) => {
    this.resizeRequest++;
    if (!this.requestId) {
      this.lastTime = performance.now();
      this.requestId = requestAnimationFrame(this._update);
    }
  };
  
  window.addEventListener("resize", this._onResize);
  window.addEventListener("scroll", this._onScroll);
}

 

Or change your functions to methods.

_onScroll(event) {
  this.scrollRequest++;
  if (!this.requestId) {
    this.lastTime = performance.now();
    this.requestId = requestAnimationFrame(this._update);
  }
}

_onResize(event) {
  this.resizeRequest++;
  if (!this.requestId) {
    this.lastTime = performance.now();
    this.requestId = requestAnimationFrame(this._update);
  }
}

 

There's a difference between the two. With methods, you will need to bind this to event listeners.

this._onScroll = this._onScroll.bind(this);
this._onResize = this._onResize.bind(this);

window.addEventListener("resize", this._onResize);
window.addEventListener("scroll", this._onScroll);

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites
21 minutes ago, OSUblake said:

Safari and Edge probably don't support declaring properties outside of the constructor yet.

 

That's why I wrote the original script in TypeScript for CodePen. I knew other browsers didn't support declaring properties/functions outside of the constructor at the time. They will eventually, but Edge and Safari are really slow to update.

  • Like 2
  • Thanks 1
Link to post
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.

×