Idea: Allow <Animatable> at any depth

[nevir]

It would be handy to support <Animatable> elements at any depth under a <AnimationGroup> or <AnimationSequence>. I.e.

<AnimationGroup ...>
  <Animatable ...>
    <div>
      ohai
      <Animatable ...>
        <div>ohai2u</div>
      </Animatable>
    </div>
  </Animatable>

I'm unsure what all the implications would be though. Would crawling the element tree on render going to be too much of a perf burden? Similarly, someone might be tempted to nesting <Animatable>s inside other <Animatable> - though, that should be ok, I think :P

[bringking]

@nevir this is a great idea, I haven't gotten around to tackling it however. That was the main idea around the Animatable interface. If you read the Web Animations API interface for a AnimationGroup, it essentially maintains one player for a bunch of keyframes + timing combinations. The tree depth shouldn't matter. The steps would be something like -

• Search Children for Animatable ( I think there are Children traversing tools out there..)
• Clone each element to get access to the ref.
• Create data structure to store nested Refs+ props
• Flatten into flat array of KeyframeEffect

To make things even more interesting, the spec fully supports nesting AnimationGroup and AnimationSequences in any nesting order.. e.g. Grouped Sequences or Sequenced Groups. So I want to tackle that at some point as well..

[nevir]

Yeah, no worries - and thanks for building this project out; it's already been tremendously helpful :)

[Tharon-C]

+1 for this feature.