Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
440design

Tweenmax smooth scrolling without Rubber-band effect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication.
Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect?

 

The simple custom code for disable rubber-band effect:

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  padding: 0;
  overflow: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

 

Rubber-band in macOS Chrome browser:

<iframe src="https://giphy.com/embed/S6kGqZiGacx6FyJmLC" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S6kGqZiGacx6FyJmLC">via GIPHY</a></p>

See the Pen NZoovp by Alex440 (@Alex440) on CodePen

Link to comment
Share on other sites

Hey 440design and welcome to the forums!

 

I can't reproduce the rubber band effect on my Macbook in the demo you provided with my mouse scroll. Is it with touch events only?

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

Hey 440design and welcome to the forums!

 

I can't reproduce the rubber band effect on my Macbook in the demo you provided with my mouse scroll. Is it with touch events only?

 

Hi ZachSaucier

 

I think yes.
I used touchpad on my Macbook and Magic Mouse 2.
The effect was the same.
Site examples:
1) https://tweenmax-smooth-scroll.webflow.io
2) https://tweenmax-smooth-scroll.webflow.io/2

Screen: https://giphy.com/gifs/S6kGqZiGacx6FyJmLC/fullscreen

Link to comment
Share on other sites

Ah, I can reproduce it on the webflow demo. 

Link to comment
Share on other sites

11 hours ago, 440design said:

Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect?

 

No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time.

 

One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller.

https://www.chromestatus.com/features/5162094739587072

https://github.com/bokand/root-scroller/blob/master/explainer.md

 

Please let Apple know that you'd like have that feature.

 

  • Like 6
Link to comment
Share on other sites

@OSUblake .. Why not disable any more comments in that smooth scrolling thread ?

 

Otherwise it will keep coming back to life, like a zombie in the dark of the night.

 

:)

  • Like 2
Link to comment
Share on other sites

Good idea, but that's only part of the problem. I still get direct messages on regular basis asking about those demos. :mad:

 

 

  • Haha 1
Link to comment
Share on other sites

TKgDeDv.jpg

  • Like 1
  • Haha 4
Link to comment
Share on other sites

14 hours ago, OSUblake said:

 

No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time.

 

One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller.

https://www.chromestatus.com/features/5162094739587072

https://github.com/bokand/root-scroller/blob/master/explainer.md

 

Please let Apple know that you'd like have that feature.

 

Thanks for the answer.
Unfortunately, this is not a solution to my problem.
But I think that this topic can be closed.

Link to comment
Share on other sites

  • 3 months later...

Hi there @OSUblake,

 

I'm trying to use the code of this pen and it seems to conflict with my scrollmagic/gsap animation. 

I'm drawing svg lines on scroll but with this code added, the lines shows/hides before drawing reach the end. If you want to see it live, contact me in private. I can't share the link live to everyone.

Link to comment
Share on other sites

@graphsynergie Both are trying to control the scroll, so it's fairly obvious that they will conflict :) Maybe you can detach one of them from the scroll and use onUpdate to move the progress instead?

Link to comment
Share on other sites

That code isn't designed to work with ScrollMagic. It works on a completely different principle.

Link to comment
Share on other sites

37 minutes ago, ZachSaucier said:

@graphsynergie Both are trying to control the scroll, so it's fairly obvious that they will conflict :) Maybe you can detach one of them from the scroll and use onUpdate to move the progress instead?

 

onUpdate is a parameter in tween, right? How can i detect scroll effect without listen to scroll? Can you show me a simple example for this case, so smoothscroll effect only. I will need scrollmagic to detect when to start scroll animation for specific elements, so i don't think i can change my current code and should focus on ajusting this one to my needs.

Link to comment
Share on other sites

2 minutes ago, graphsynergie said:

I will need scrollmagic to detect when to start scroll animation for specific elements

You can do animations on scroll without Scroll Magic. Most likely it'd be simpler to avoid using it completely.

Link to comment
Share on other sites

Just now, ZachSaucier said:

You can do animations on scroll without Scroll Magic. Most likely it'd be simpler to avoid using it completely.

How? Do you have a pin post showcase?

 

Listenning scroll and detect position with scrollTop or something?

Link to comment
Share on other sites

This day in age it's often times adequate to use the Intersection Observer API. I use it in this thread that you can take a look at:

Exactly what you need depends on the effect that you want. Given you have 0 description of that, we can't really provide much more help at this point. Maybe it would be good to create a new thread about your topic where you describe your goal and include a recreation of your attempts in a CodePen.

  • Like 1
Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

This day in age it's often times adequate to use the Intersection Observer API. I use it in this thread that you can take a look at:

Exactly what you need depends on the effect that you want. Given you have 0 description of that, we can't really provide much more help at this point. Maybe it would be good to create a new thread about your topic where you describe your goal and include a recreation of your attempts in a CodePen.

 

Thanks! I didn't know it exist! I will dig into it and try something. If i have any question about it, i will create a post with a codePen example :-)

Link to comment
Share on other sites

  • 1 year later...

Hi, script (https://greensock.com/forums/topic/17300-smooth-page-scroll/) is working very well but I've got one issue. When I'm navigating through the page with TAB key, transition is not updating then when I'm starting to scroll I can scroll more the actual page height is. Can you help me?

Link to comment
Share on other sites

@kicu welcome to the forums. It'd be best to create your own thread for a new request like this instead of hijacking an old one if you don't mind. Also, you'll exponentially increase your chances of getting an answer if you provide a minimal demo.

 

If you're talking about Blake's script, it isn't really something we can actively support here, but if you put together a very basic demo that shows the problem (like in a CodePen), someone may have time to offer advice. 

 

Happy tweening!

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.

×