Scroll Effects

More than just translate effects are possible. Here's some examples of the various effects possible.

Rotation

You can spin an element around it's axis using the rotate props.

Around the default axis (z-axis)

Use the rotate prop to rotate an element around the z-axis. You can pass the start and end values as deg or turns. Numbers default to deg.

const Component = () => {
  const parallax = useParallax<HTMLDivElement>({
    rotate: [0, 360],
  });
  return (
    <div ref={parallax.ref} className="spinner">
      😵‍💫
      <div className="diamond">💎</div>
      <div className="clown">🤡</div>
      <div className="money">💰</div>
      <div className="hand">👌🏻</div>
    </div>
  );
};

😵‍💫

💎

🤡

💰

👌🏻

Around the y-axis

Rotations can be applied to any axis, x, y, or z. Here's an example of a rotation around the y-axis for perspective:

const Component = () => {
  const parallax = useParallax<HTMLDivElement>({
    rotateY: [0, 360],
  });
  return (
    <div ref={parallax.ref} className="spinner">
      <div className="thumbsup">👍🏻</div>
      <div className="clap">👏🏻</div>
      <div className="handsup">🙌🏻</div>
      <div className="thumbsdown">👎🏻</div>
    </div>
  );
};

👍🏻

👏🏻

🙌🏻

👎🏻

Scale

You can scale an element up or down and along any axis.

const Component = () => {
  const mage = useParallax<HTMLDivElement>({
    scale: [0.5, 1, 'cubic-bezier(0.55, 0.085, 0.68, 0.53)'],
  });

  const frog = useParallax<HTMLDivElement>({
    scaleX: [1, 0, 'cubic-bezier(0.55, 0.085, 0.68, 0.53)'],
  });

  const moon = useParallax<HTMLDivElement>({
    scale: [1.5, 1, 'cubic-bezier(0.55, 0.085, 0.68, 0.53)'],
  });
  return (
    <div className="spinner">
      <div className="mage" ref={mage.ref}>
        🧙🏻‍♂️
      </div>
      <div className="frog" ref={frog.ref}>
        🐸
      </div>
      <div className="moon" ref={moon.ref}>
        🌚
      </div>
    </div>
  );
};

🧙🏻‍♂️

🐸

🌚