Wrap AdobeEdge animation into React.js component

Question

I have AdobeEdge and I need to wrap it inside React.js component.

Component's code:

let ModalWithAnimation = React.createClass({
    render() {
        return (
            <div className="modal-dialog timeslot-modal rc5">
                <div className="modal-content light-grey">
                    <div className="modal-body">
                        <div ref='stage' id="Stage" className="EDGE-18968668">
                        </div>
                    </div>
                </div>
            </div>
        );
    },
    componentDidMount() {
        const compId = 'EDGE-18968668';
        let composition = AdobeEdge.getComposition(compId);
        if (composition) {
            composition.getStage().play();
            return;
        }
        AdobeEdge.loadComposition('/static/animations/rsvp/progress', compId, {
            scaleToFit: "none",
            centerStage: "none",
            minW: "0px",
            maxW: "undefined",
            width: "70px",
            height: "70px"
        }, {
            dom: [ ]
        }, {
            dom: [ ]
        });
    }
});

So, as you see, in componentDidMount method I'm trying to find composition by id and play it. If I don't find composition, it will be loaded by AdobeEdge.loadComposition method.

First time it will load correctly. But when React-component (modal) shows secondly, it don't work.

I think, problem might be because when my component (which is also bootstrap-modal) re-renders, reference to DOM-element inside AdobeEdge composition leads to another DOM-element, which is not in actual DOM. I tried to change reference to actual DOM-element but it still don't work.

What should I do in this situation?

Answer 1

Did you try calling composition.ready() before composition.getStage().play()? I have pretty much the same code as you have but that ready() recreates the stage.