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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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.

Share this post


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.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×