Idiomatic Solution/Code Review

[slapxxi]

Hi, folks! I'm creating a diamond slider based on this video by Keyframers. My question is if my solution/code looks idiomatic to you or there is a better, more obvious, way to calculate the difference between animation goal and current animation value?

Demo can be found in this sandbox.

Code:

// @jsx jsx
import { css, jsx } from "@emotion/react";
import * as React from "react";
import { render } from "react-dom";
import { animated, useSpring } from "@react-spring/web";

function App() {
  return (
    <div
      css={css`
        padding: 4rem 1rem;
      `}
    >
      <DiamondSlider />
    </div>
  );
}

export function DiamondSlider() {
  let [spring, api] = useSpring(() => ({
    to: { x: 0, rotate: 0, scale: 0, y: 20 },
    config: (key) => {
      switch (key) {
        case "x":
          return { friction: 24 };
        case "scale":
          return { duration: 100, delay: 1000 };
        case "rotate":
          return { friction: 10 };
        default:
          return {};
      }
    },
    onChange: {
      x: (x: number) => {
        let d = (x - spring.x.goal) / 100;
        api.start({ rotate: d * 90 });
      }
    },
    onRest: {
      x: () => {
        api.start({ y: 20, scale: 0, delay: 1000 });
      }
    }
  }));
  const baseColor = 330;

  function handleChange(e) {
    let value = +e.target.value;
    api.start({
      x: value,
      y: 0,
      scale: 1,
      delay: 0
    });
  }

  return (
    <div>
      <div
        css={[
          css`
            display: grid;
            grid-template-rows: 10px;
            grid-template-areas: "l";
            align-items: center;
          `
        ]}
      >
        <div
          css={[
            css`
              height: 10px;
              border-radius: 4px;
              background: hsl(${baseColor}, 3%, 80%);
              grid-area: l;
            `
          ]}
        ></div>

        <animated.div
          css={[{ gridArea: "l", position: "relative", right: 7.5 }]}
          style={{ x: spring.x.to([0, 100], ["0%", "100%"]) }}
        >
          <div
            css={[
              css`
                width: 15px;
                height: 15px;
                border-radius: 50%;
                grid-area: l;
              `,
              { background: `hsl(${baseColor}, 100%, 50%)` }
            ]}
          ></div>
        </animated.div>

        <animated.div
          style={{ x: spring.x.to([0, 100], ["0%", "100%"]) }}
          css={[{ position: "relative", right: 15 }]}
        >
          <animated.svg
            viewBox="0 0 5 5"
            width={30}
            style={{
              rotate: spring.rotate,
              scale: spring.scale,
              y: spring.y
            }}
            css={[
              css`
                position: absolute;
                fill: crimson;
                grid-area: l;
                top: -50px;
              `
            ]}
          >
            <path
              d="M0 1.5 2.5 4.5 5 1.5 4 .5H1Z"
              fill={`hsl(${baseColor}, 100%, 47%)`}
            />
            <path
              d="M3.32 1.75 5 1.5 2.5 4.5Z"
              fill={`hsl(${baseColor}, 100%, 33%)`}
            />
            <path
              d="M 0 1.5 L 2.5 4.5 L 1.5 1.75 Z"
              fill={`hsl(${baseColor}, 100%, 80%)`}
            />
            <path
              d="M1.5 1.75 2.35.5 3.32 1.75Z"
              fill={`hsl(${baseColor}, 100%, 70%)`}
            />
          </animated.svg>
        </animated.div>

        <input
          type="range"
          min={0}
          max={100}
          defaultValue="0"
          onChange={handleChange}
          css={[
            css`
              grid-area: l;
              opacity: 0.0001;
              z-index: 10;
            `
          ]}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);