Is it possible to use a custom delay in useTrail?

[sanderwapstra]

I tried like this but no success:

const trail = useTrail(items.length, {
    scale: loaded ? 1 : 0,
    delay: 500, // or delay: i => i * 500
});

Any help is appreciated!

Edit: I've added a gif to give a bit more context. I'm trying to create a staggering speech bubble effect but need more time between the items. I've chained three different trails together to get this effect. Maybe there is a cleaner way, let me know :).

[ajitid]

If by items you mean those bubbles, then you need to use useTransition over useTrail. What react-spring version you are on?

[sanderwapstra]

@ajitid Thanks for your reply! I'm on ^9.0.0-rc.3.

[ajitid]

When isLoaded is true your message bubbles need to appear, which makes useTransition a better solution here as it handles mount and unmount animations.

const Stuff = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const data = isLoaded ? [1, 2] : [];

  const transitions = useTransition(data, {
    from: {
      opacity: 0,
      scale: 0.93,
    },
    enter: (msg, i) => ({
      delay: () => {
        return i * 500;
      },
      opacity: 1,
      scale: 1,
    }),
  });

  const msgs = transitions((style, msg) => {
    return (
      <a.div key={msg} style={style} className="message-bubble">
        {msg}
      </a.div>
    );
  });

  return (
    <div>
      <button onClick={() => setIsLoaded(true)}>Load messages</button>
      <div>{msgs}</div>
    </div>
  );
};