gistfile1.txt

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { animated, useTrail } from "react-spring";

import "./styles.css";

const Box = styled(animated.div)`
  background: black;
  color: white;
  display: inline-block;
  width: 3rem;
  margin-right: 1rem;
`;

function App() {
  const nums = ["one", "two", "three"];
  const trails = useTrail(nums.length, {
    from: { transform: "scaleY(1)" },
    to: [
      { transform: "scaleY(2)" },
      { transform: "scaleY(1)" },
      { transform: "scaleY(2)" },
      { transform: "scaleY(1)" },
      { transform: "scaleY(2)" },
      { transform: "scaleY(1)" },
      { transform: "scaleY(2)" },
      { transform: "scaleY(1)" }
    ]
  });
  return (
    <div className="App">
      <h1>react-spring useTrail 8.0.27</h1>
      {trails.map((props, idx) => (
        <Box style={props} key={nums[idx]}>
          <h1>{nums[idx]}</h1>
        </Box>
      ))}
    </div>
  );
}

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