nathansearles

// easing functions http://goo.gl/5HLl8
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) {
    return c/2*t*t + b
  }
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

nathansearles

Demo

Context

useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.

So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:

function Sun(props) {
 const { scrollY, scrollYProgress } = useViewportScroll();