.button {
  transition: transform 0.3s ease-out;
  &:hover{
    transform: scale(1.1) translateY(-5%);
  }
}

// adapted from Apple's "Designing Fluid Interfaces" talk 
// startVelocity = px/ms
const projection = (startVelocity, decelerationRate=0.998) =>
  startVelocity * decelerationRate / (1 - decelerationRate)
  
// example usage
const velocityY = 1.2 // in px/ms
const projectedEndpoint = projection(velocityY) // 679px

const bind = useXXXX(state => {
  const {
    event,       // the source event
    xy,          // [x,y] values (pointer position or scroll offset)
    previous,    // previous xy
    initial,     // xy value when the gesture started
    movement,    // last gesture offset (xy - initial)
    delta,       // movement delta (movement - previous movement)
    offset,      // offset since the first gesture
    lastOffset,  // offset when the last gesture started
    vxvy,        // momentum of the gesture per axis
    velocity,    // absolute velocity of the gesture
    distance,    // offset distance
    direction,   // direction per axis
    startTime,   // gesture start time
    elapsedTime, // gesture elapsed time
    timeStamp,   // timestamp of the event
    first,       // true when it's the first event
    last,        // true when it's the last event
    active,      // true when the gesture is active
    memo,        // value returned by your handler on its previous run
    cancel,      // function you can call to interrupt some gestures
    canceled,    // whether the gesture was canceled (drag and pinch)
    down,        // true when a mouse button or touch is down
    buttons,     // number of buttons pressed
    touches,     // number of fingers touching the screen
    args,        // arguments you passed to bind
    ctrlKey,     // true when control key is pressed
    altKey,      // "      "  alt     "      "
    shift,       // "      "  shift   "      "
    metaKey,     // "      "  meta    "      "
    dragging,    // is the component currently being dragged
    moving,      // "              "              "  moved
    scrolling,   // "              "              "  scrolled
    wheeling,    // "              "              "  wheeled
    pinching     // "              "              "  pinched
  } = state
})

```js
const rubberBand = (distance, dimension, constant = 0.55) => 
(distance * dimension * constant) /
(dimension + constant * distance)

const rubberBandClamp = (min, max, delta, constant) => 
	delta < min 
	? -rubberBand(min - delta, max - min, constant) + min
	:delta > max
	 ? rubberBand(delta - max, max - min, constant) + max
	 : delta 
```

   tl = gsap
      .timeline({
        onComplete,
      })
      .add(animateCardEntry(refs))
      .add(animateHatFlyUp(refs))
      .add(animateQRCodeZoomAndFind(refs), "-=0.3")
      .add(animateQRManLeftHand(refs))
      .add(animateQRManRightHand(refs, setIsGWordAnimate))
      .add(animateQRCodeOk(refs))
      .add(animateCardLeave(refs))

export default function animateQRManRightHand(
  {
    refHandRight,
    refRiseHand,
  },
  setIsGWordAnimate
) {
  const initHandPathCache = 
  	refHandRight.getAttribute("d")

  const [codeIcon, codeIconUp] = 
  	refIconCodeGroup.childNodes

  return (
    gsap
      .timeline({
      	onComplete: setIsGWordAnimate
      })
      // rise hand
      .to(refHandRight, {
        morphSVG: refRiseHand,
        duration: 0.4,
      })      

...

document
    .getElementById("markpen")
    .addEventListener("click", () => {
        this.anim.playSegments([[105, 522], [328, 522]], true);
    });