Wrapping imported Component with Animatable throws "Illegal Invocation"

[Tharon-C]

Firstly, I'm super excited about this project!

I might be missing something so I apologize if I am.

When I try to import a component, say Box.js and animate it within AnimationGroup I get the error: "Illegal Invocation" on GroupConstructors.js which looks like part of the polly fill.

The same render method from Box.js works fine if used directly within Animatable.

This below throws the error.

Box.js

import React, { Component, PropTypes } from 'react';   

export default class Box extends Component {           
    constructor(props) {                               
        super(props);                                  
    }                                                  

    static propTypes = {                               
        className: PropTypes.string,                   
        children: PropTypes.node,                      
    };                                                 

    render() {                                         
        let style = {                                  
            box: {                                     
                width: "100px",                        
                height: "100px",                       
                background: "gold",                    
            },                                         
        };                                             

        return (                                       
            <div style={ style.box }/>                 
        );                                             
    }                                                  
}  

ImportedBox.js

import React, { Component } from 'react';
import { AnimationGroup, Animatable } from 'react-web-animation';
import Box from './Box';

export default class ImportedBox extends Component {
    constructor(props) {
        super(props);
    }

    getKeyFrames() {
        return [
            { transform: 'rotate(0deg)' },
            { transform: 'rotate(360deg)' },
        ];
    }

    getTiming( duration ) {
        return {
            duration,
            iterations: Infinity,
        };
    }

    render() {
        let style = {
            viewport: { 
                height: "100vh",
                background: "lightskyblue",
            },
        };

        return (
            <div style={ style.viewport } >
                <AnimationGroup
                >
                    <Animatable
                        id="2"
                        keyframes={ this.getKeyFrames() }
                        timing={ this.getTiming(4000) }
                    >
                        <Box/>
                    </Animatable>
                </AnimationGroup>
            </div>
        )
    }
}

[Tharon-C]

Turns out wrapping Box with a regular tag works...

I'll test out the g tag for composing within an svg

[bringking]

@Tharon-C yes, I wanted to investigate this further, but essentially the Web Animations API can only be attached to real DOM elements e.g div, span etc. Should be relatively easy to search children for the first valid wrapping element and target that rather than trying to get the "first" child.

[Tharon-C]

That's what I figured in retrospect. I might look at how that would look tonight.

Thanks