Animate array of refs to move hundreds of elements with one animation definition

[Damian Pereira]

Feature Request

Describe the Feature

Hi! I'm trying to animate something like confetti falling down seen here. In order to get this to work I want to animate hundreds of small divs, with small variations between the animations.

Describe the Solution You'd Like

If I have something like this in my component:

const {pushToRefs, getAnimations} = useWebAnimationGroup((index) => {...confettiFalling(index)})
// confettiFalling returns slightly different parameters for each index
return <>
  {[...Array(1000).keys()].map(key => (
    // pushToRefs registers each div in an array and runs the function provided to the hook for each one.
    <div className="confetti-particle" key={item} ref={pushToRefs}/>
  ))
</>

Then I'd like to be able to pause/reverse all of the animations as if they were one

const handlePause = () => getAnimations().pause()

Describe Alternatives You've Considered

I could maybe get it t work with a HOC which calls the use web animation hook internally, and provides a prop for play state, and have the HOC use useEffect to react to the changes. It would be a bit cumbersome maybe, but it can probably work fine for my usecase.

[Damian Pereira]

I have tried the HOC approach, and found out a bug, please check #448

[Welly Shen]

@DamianPereira This library is designed for animating a single element. It should be wrapped in a component for your case.