javascriptdraggablegsapoverscroll

How to overscroll using gsap Draggable with scrollTop?

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.)

Solution

  • This is exactly what the edgeResistance is for:

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

    Demo