Jump to content
GreenSock

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

Tweenmax smooth scrolling without Rubber-band effect

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 post
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 post
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 post
Share on other sites

Ah, I can reproduce it on the webflow demo. 

Link to post
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 post
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 post
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 post
Share on other sites

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 post
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 post
Share on other sites

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

Link to post
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 post
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 post
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 post
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 post
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 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.

×