Multiple configs for separate animations in useTrail

[tomchambers2]

Use case: a list where each item contains multiple elements with separate animations. For example it has a bullet point and text. I'd like the bullet point to scale and the text to fade in.

This works so far because I can break up the animations by selecting relevant parts of useTrail and passing them to the children - except if I want to have different configs for each animation.

Example where this would be useful: https://codesandbox.io/s/ecstatic-bassi-to73v?file=/src/App.js

import "./styles.css";
import { useTrail, animated } from "@react-spring/web";

const Bullet = ({ style }) => {
  return <animated.div style={style} className="bullet" />;
};

const Text = ({ content, style }) => {
  return <animated.div style={style}>{content}</animated.div>;
};

export default function App() {
  const items = ["Apple", "Banana", "Chocolate", "Lemon"];

  const trail = useTrail(items.length, {
    // here I would like to have a separate config for each property - or have multiple springs in the trail
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1 }
  });

  return (
    <div className="App">
      <ul>
        {trail.map((props, index) => (
          <animated.li>
            <Bullet style={{ scale: props.scale }} />{" "}
            <Text style={{ opacity: props.opacity }} content={items[index]} />
          </animated.li>
        ))}
      </ul>
    </div>
  );
}

This works, but I'd like to have the config for the bullet go past 1 and bounce, while the content would be linear fade from 0-1.

Any ideas?