React + Greensock refs as props

fh438fb34gg943h · October 30, 2017

So i have been experimenting with greensock and React and i cant seem to get past this issue.

I have 2 components App and Body

App gives Body a ref prop and Body should use it for setting up the refs and also play an animation on componentDidMount

App:

import React from "react";
import {render} from "react-dom";
import {Body} from "./Body.jsx";

class App extends React.Component {

    constructor() {
        super();
        this.state = {
            appStateReady: false,
            data: null,
        }
    }

    componentWillMount() {
        this.loadData()
    }

    loadData = () => {
        fetch('/dist/data/data.json')
            .then(response => {
            if (response.status !== 200) {
                console.log("Couldnt fetch the json data. Code: " + response.status)
            }
            response.json().then(data => this.setState({data: data, appStateReady: true}))
            })
    };

    renderApp() {

        return (
            <div>
                <Body containerRef={c => this.container = c} tilesRef={c => this.tiles = c} data={this.state.data}/>
            </div>
        )
    }


    render() {
        if( this.state.appStateReady === true ) return this.renderApp();
        else return <div></div>
    }
}

render(<App />, document.getElementById('mysite'));

As you can see Body gets the containerRef prop and the tilesRef prop both as callback refs

Body:

import React from "react";
import {Background} from "./Background.jsx";
import {TimelineMax} from 'gsap';

export class Body extends React.Component {

    constructor() {
        super();
        this.state = {
            appStateReady: false,
            fadeIn: true,
            answerData: [],//{qid:q1,aid:a1,rating:0}
            boxes: [],
        }
    }

    componentWillMount() {
    }

    componentDidMount = () => {
        let ba = new TimelineMax( {onComplete: this.fadeInHeadline });
        let c = this.overlay;
        ba.to(c, 2, {css:{opacity:0}});
    };

    fadeInHeadline= () => {
        new TimelineMax( {onComplete: this.fadeInTiles }).to(this.header, 2, {y:0});
    };

   fadeInTiles= () => {
        new TimelineMax().to(this.props.tilesRef, 2, {opacity:1});
        this.setState( { fadeIn: false} );
    };

    render() {
        return (
            <div>
                {/*<Background />*/}
                <div className="mainContainer" ref={this.props.containerRef}>
                    <header ref={c => this.header = c}>
                        <h1>{this.props.data.title}</h1>
                        <h2>12.11.2017 {this.props.data.customerName}</h2>
                    </header>
                    <section id="tiles" ref={this.props.tilesRef}> 
                    </section>
                </div>
                {this.state.fadeIn && <div className="overlay" ref={c => this.overlay = c} />}
            </div>
        )
    }
}

Now the fadeInTiles() animation doesnt do anything not even an error. I cant seem to figure out why as my understanding of refs might be flawed to but as i see it should work.

I stripped a lot of unrelated code for visibility.

If anybody here with a better understanding of React and greensocks could help me out it would be greatly appreciated!

Edit: Oh and the reason why i pass the refs as props is because a sibling component has a button and that button should start an animation on the here defined refs and i dont really see another way to archieve this other than defining the refs in the parent.

Carl · October 31, 2017

Hi fh438fb34gg943h,

Welcome to the GreenSock forums. Sorry, but we don't do a lot with React around here at the moment. There's a chance some members will be able to help you but its always nice to have some sort of a reduced demo that people can explore and see what is happening.

We recommend CodePen but any of the many online editors will suffice.

Notifications

Messages

React + Greensock refs as props

Warning: Please note

Recommended Posts

fh438fb34gg943h

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members