fh438fb34gg943h
fh438fb34gg943h's Achievements
0
Reputation
-
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.