0
import {gsap} from "gsap";
import Draggable from "gsap/Draggable";
import { InertiaPlugin } from "./libs/gsap/InertiaPlugin";
import { ScrollToPlugin } from "./libs/gsap/ScrollToPlugin";

gsap.registerPlugin(Draggable)
gsap.registerPlugin(InertiaPlugin);
gsap.registerPlugin(ScrollToPlugin);

Draggable.create(scrollContainer, {
    type: 'scrollTop',
    inertia: true,
});

This simple example works nice for making a vertical scroll/throw effect for desktop browsers.

When flick scrolling back to top, the inertia plugin makes the content overscroll and bounce back to starting point. This is good.

However, the overscroll does not happen when just dragging, ie. like on an iPad. Is it possible to make Draggable overshoot/overscroll while dragging and bounce back when dragging ends?

Edit: Here is codepen with example:

https://codepen.io/Agint/pen/LYZMyYR

(I could not find cdn version of the newest gsap InertiaPlugin, so this version is with older version. The behaviour and problem are exactly the same regardless of version. Locally, I have the the newest gsap version with bonus files that includes InertiaPlugin from greensock.)

Solsiden
  • 673
  • 1
  • 7
  • 22

1 Answers1

1

This is exactly what the edgeResistance is for:

Draggable.create("#scrollContainer", {
  type: "scrollTop",
  inertia: true,
  edgeResistance: 0.9
});

Demo

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • It works very nice when overscrolling to the top, but at the bottom it is a bit funky. Change the resistance to 0.5 to make it more obvious. It might be how I have set up the divs, will look more into it. – Solsiden Nov 12 '20 at 18:16
  • Yes, I believe it has to do with your CSS. Removing the unnecessary `position` and `float` properties it works fine for me. – Zach Saucier Nov 12 '20 at 19:47