Jump to content
GreenSock

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

Simulate overscroll rubber-band effect with ScrollMagic

Recommended Posts

I want to replicate an iOS Safari like rubber-band effect, when you overscroll pages or apps. 

 

I just can't get the easings / ScrollMagic settings right.. 

This thing needs some physics!

See the Pen ddLgdx by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

I didn't quite understand the question, and I'm not very familiar with ScrollMagic so I may not be able to give you exactly what you want, but ThrowPropsPlugin might be super helpful in this type of interaction. It can handle elegantly transitioning between any property going a particular velocity, and then landing at any spot you want; if necessary, it'll shoot past and come back (like overscrolling). It many ways, it's actually better than physics because you can control the duration, ease, and predict precisely where the landing point will be, even from the very start. 

 

https://greensock.com/docs/Plugins/ThrowPropsPlugin

  • Like 2
Link to comment
Share on other sites

I'm assuming you want some kind of kinetic scrolling with a back or elastic ease at the end. The question is... are you planning to scroll the document or actually have scroll control an element. If it's the document you would want to animate the window with the scrollTo plugin.

https://greensock.com/ScrollToPlugin

 

Your animation is set up to try and animate the div element itself, in which case see Jack's answer.

 

 

Also there a is a good discussion with solutions from Blake on a generally related topic here:

 

 

Here's a mod to an existing pen that quickly demos a back ease with scrollTo and scrollMajic. Note: there needs to be a large enough offset on the trigger to avoid having the backEase's overscroll trigger the next animation.

 

See the Pen KQjVaL by Visual-Q (@Visual-Q) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thank you for your replies! Unfortunately deadline is kicking so hard, that I can't look into your suggestions in depth right now.

 

Attempt to clarify what I want:

My page is extremely long (a case study) at the end of the page ScrollMagic triggers an animation (the scenes duration is 0)

This animation contains some fixed elements which cover the whole screen.

 

The thing is, when this animation triggers the user is surprised, and it feels unexpected.

We want to send the message that the page is coming to its end by "making it harder to scroll down" – like there is a rubber at the bottom which pulls the content harder and harder.  

 

But we don't want the content to snap back to it's original position.

The way I see it: All I need is a tween, that increases the y-value while scrolling. But the rate at which this value increases, needs to increase as well. I fiddled around with several easings, but couldn't accomplish the feel of pulling on a rubber.

 

Maybe what I want is comparable in feel with the "pull to refresh" feature many apps use these days.

Mostly though, I think it is comparable to the overscroll effect on iOS Safari (without the back-snapping, of course).

Link to comment
Share on other sites

If you've got a scroll-based animation that's affecting the "y", couldn't you just do one of these?:

 

1) Adjust whatever value that the scroll is reporting so that it's reduced beyond a certain point? For example, let's say it's supposed to kinda "resist" once scrollTop is 1000, you cut the values beyond that in half (or whatever). In other words

if (scrollTop > 1000) {
    scrollTop = 1000 + (scrollTop - 1000) * 0.5;
}
...

 

2) Or add another tween AFTER the 1000 point that continues your "y" tween but at half the rate so that scrolling further seems to slow it down.

 

?

 

I'm not very familiar with ScrollMagic or how difficult it might be to implement either of these, but hopefully it's not too bad. 

  • Like 4
Link to comment
Share on other sites

ScrollMagic is good for one thing, and one thing only, triggering animations based on a scroll position. It is not ideal for anything that involves animating scroll behavior because then it would be working against its own logic.

 

Here's the ScrollMagic library reduced to 44 lines of code. Yes, it's just a fancy way of creating a timeline :o

 

See the Pen a633d0c9e6e2b951496d7f1eb4fd8fb6 by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

On 3/6/2018 at 10:46 AM, kreativzirkel said:

Mostly though, I think it is comparable to the overscroll effect on iOS Safari (without the back-snapping, of course).

 

I think that might be tricky. Why not do something like on Android devices with the "glow" behavior. Well, that's what they call it, but instead of overscrolling, a Bezier curve extends out showing the amount of overscroll.

  • Like 1
Link to comment
Share on other sites

6 hours ago, OSUblake said:

Inspiration. You can set the overscroll effect to glow in this demo.

https://idiotwu.github.io/smooth-scrollbar/

 

There is also this, which may provide some assistance ( kind of outdated however, from 5 years ago )

 

"Add Overflow Scroll Effect (Bounce/Glow) like on iOS/Android but for your website"

https://github.com/peachananr/fancy-scroll

  • Like 2
Link to comment
Share on other sites

@OSUblake with the smooth scrolling page script you wrote awhile back... I remember playing with the parameters affected how it much it influenced the effect on page scroll. Could that parameter value be passed dynamically to introduce resistance?

 

 

Link to comment
Share on other sites

Well I wrote a few, but yeah. The only problem is that you really can't use ScrollMagic because it will use the incorrect scroll value. That's why I was saying ScrollMagic isn't good for animating scroll behavior. It reads the current scroll value much like the ScrollToPlugin's autoKill feature detects scrolling.

  • Like 1
Link to comment
Share on other sites

 

On 8.3.2018 at 6:32 AM, OSUblake said:

ScrollMagic is good for one thing, and one thing only, triggering animations based on a scroll position. It is not ideal for anything that involves animating scroll behavior because then it would be working against its own logic.

 

On 8.3.2018 at 7:13 PM, OSUblake said:

The only problem is that you really can't use ScrollMagic because it will use the incorrect scroll value. That's why I was saying ScrollMagic isn't good for animating scroll behavior. It reads the current scroll value much like the ScrollToPlugin's autoKill feature detects scrolling.

 

Sorry, I don't understand what you're trying to say here. By "triggering animations based on scroll position" you mean .play() and .reverse() at one specific scroll position. 

 

And by "animating scroll behavior" you mean faking the overscroll effect, for instance, and NOT tweening a timelines progress over scroll position A to scroll position B?

 

Aaaand I don't see why ScrollMagic would work against it's own logic. I don't animate the element that is specified as the "triggerElement" –

Link to comment
Share on other sites

Basically what I'm saying is that you can't use ScrollMagic if you want to modify the scroll behavior. The library is not designed to handle such scenarios.

 

By modifying the scroll behavior, I'm talking about modifying the native scroll behavior. How the user scrolls the page. 

https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#hwQTx9IDZT5f4TgU.97

 

Trying to do an overscroll effect would involve modifying the native scroll behavior.

  • Like 4
Link to comment
Share on other sites

On 18.3.2018 at 6:16 PM, OSUblake said:

Trying to do an overscroll effect would involve modifying the native scroll behavior.

 

I explicitly don't want the page to change it's scroll behavior, because I need to play another timeline at a certain scroll position (bottom of the page). In order to communicate visually that something is gonna happen in a few more scroll-pixels, I only want to visually tease as if the scroll would be getting harder.

 

Maybe the live example makes it more clear. At the bottom, where the jump-module gets animated in, we feel like it's too sudden and unexpected, which is why- .. I can just repeat myself :D:D

 

http://dumbo.design/team

Please note: this is still more or less a beta; I wanted to show you guys when it's finished and polished. 

Link to comment
Share on other sites

On 3/23/2018 at 6:05 AM, kreativzirkel said:

I only want to visually tease as if the scroll would be getting harder.

 

I get what you're asking, but I'm just not sure how you could do that without modifying the scroll behavior. To make it seem like the scroll is getting harder, you would have to add a bunch of extra space to the bottom, and then start translating all the content down once you reach a certain scroll position, but with some friction. I think coding something like that would be pretty difficult. 

  • Like 2
Link to comment
Share on other sites

@OSUblake could you use the scrollTo plugin here and perhaps link the scrollTo tween progress to mousescroll or perhaps scrollTop position. If it's scrolling the DOM(window) and not translating content then I don't think it should interfere with Scroll Majic triggers. I would expect they would trigger fine whether the scrollTo plugin or default behaviour was scrolling the DOM.

Link to comment
Share on other sites

16 hours ago, Visual-Q said:

@OSUblake could you use the scrollTo plugin here and perhaps link the scrollTo tween progress to mousescroll or perhaps scrollTop position. If it's scrolling the DOM(window) and not translating content then I don't think it should interfere with Scroll Majic triggers. I would expect they would trigger fine whether the scrollTo plugin or default behaviour was scrolling the DOM.

 

 

Yes, you could do that and have it still work with ScrollMagic. Getting it to work with a mouse scroll probably wouldn't be too hard. My concern would be with touch on mobile. I haven't tried it, but I think getting it to look and behave correctly might be hard.

 

  • Like 1
Link to comment
Share on other sites

52 minutes ago, OSUblake said:

 

Yes, you could do that and have it still work with ScrollMagic. Getting it to work with a mouse scroll probably wouldn't be too hard. My concern would be with touch on mobile. I haven't tried it, but I think getting it to look and behave correctly might be hard.

 

I can't attest to how finicky it would be to try and get control of touch behaviour having never tried it, but at least it's a potential way of getting control over DOM scroll using GSAP without altering anything in the DOM and compromising other animation and Scroll Majic triggers, if they wish to investigate it.

 

 

 

 

  • Like 1
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.
×