[Using TimelineLite with React and Child Components]

Hi Everyone,

I'm trying to figure out how to use timelineLite with React properly. I attached a codepen that works but I have read is not best practice. The key thing I need is a parent component that will contain the timeline object as a state and then a series of child components that I iterate over. 

 

I read this blog post that claims that it is important to use the onComplete() call back when I am setting up my timeline entries.  The callback gets triggered within the ChildItem when it appears or disappears. The problem with react is that data flows from the top on down, so I can't for the life of me figure out how I can get the callback up into the parent component so I can register it properly. 

 

Can anyone suggest the best way to handle this particular problem? Are there any other changes I should make to this codepen? I heard that I should be using refs instead of ReactDOM but I haven't been able to figure that out either. Thanks! 

See the Pen zdJbLK by CaptainChemist (@CaptainChemist) on CodePen

[Timelinelite forward & reverse motions don't match]

That was super helpful, thank you! Just as a followup, what would be the proper way to write the ball so that it had the rolling & moving behavior as well as the rolling & bouncing behavior? If I just wanted the little bit of bounce at the end, should I really have just ended the first tween after rolling down say 90%, and then having the second tween pick up there at +=0 and continue to roll down the last 10% but add the bounce animation as well? There isn't a way to specify that the bounce animation only turns on 90% through an animation, for example, right?

[Timelinelite forward & reverse motions don't match]

Hi everyone, 

I am having a problem with making a ball roll down a ramp and then bounce off a block when it hits the bottom. I am including a working version in codepen which will speak many more words than I can, but the problem is that the roll works perfectly when it plays initially, but if I grab the progress bar to readjust it, the ball does not roll back up the ramp but only the Top direction moves, not the Left. I can only fix it by reloading the page.  

 

I can fix this problem by removing the "-=0.05" timing parameter from the last timeline transition, but I feel like I shouldn't have to do that and I am missing something more basic.

 

Thanks so much!

Stephen

 

See the Pen Bpyedz by CaptainChemist (@CaptainChemist) on CodePen

[progress() not working with timeline lite and react]

As a final update, I was able to figure out how you can access the state of a timeline within react. The trick is to define the timeline in the parent component and then to add a onUpdate event callback within the child component. Here is a working example, I hope that it helps someone!

 

See the Pen XKzJay?editors=0010 by CaptainChemist (@CaptainChemist) on CodePen

[Using Greensock with Meteor]

Sure, this is kind of hard for me to strip down but I am pretty sure the following will work. Each component would be in its own separate file. Let me know how it fairs when you try it. The idea is that I loaded the timeline in the parent file, passed it in as a prop to the tweens component and then a separate component called controls which has the play, pause etc buttons. This all works great for me except getting a progress bar. If you can figure that part out definitely let me know:

http://greensock.com/forums/topic/14729-progress-not-working-with-timeline-lite-and-react/

 

export class DraggableObjects extends React.Component {
  componentDidMount(){
    this.props.timeline.from('#tweenId1', 2, {left: 100, opacity: 0});


  render(){
    return(
      <p id="tweenId1">Test Transition</p> //In Reality, I have a loop where I loop through all of my draggable objects and assign ids that I can refer to in the componentDidMount
    )
  }
}


export class Parent extends React.Component {
  render(){
    let timeline = new TimelineLite();
    return(
      <div>
        <DraggableObjects timeline={timeline} />
        <Controls timeline={timeline} />
      </div>
    )
  }
}

export Controls extends React.Component {
  play(event){
    event.preventDefault();
    this.props.timeline.play();
  }

  render(){
    return(
        <button onClick={this.play.bind(this)} id="play">play()</button>
    )
  }
}

[progress() not working with timeline lite and react]

Thanks, for what it is worth I am using Meteor+React, but I totally understand that this issue is getting to be less of a GSAP issue. Thanks again for getting me this far!

[Using Greensock with Meteor]

I am using Meteor + React and it works great with the 'gsap' npm package. Just import it and put all of your transitions in the componentDidMount() {} function and define your timeline in the render function.

[progress() not working with timeline lite and react]

My thoughts were similar to yours but when I implemented it like you suggested, I get an error that "this.setState is not a function". The issue is also reflected in the codepen demo:

See the Pen XKzJay?editors=1111 by CaptainChemist (@CaptainChemist) on CodePen

 

I also tried adding .bind(this) to the this.tlUpdate function but that actually causes the browser to become unresponsive. Thanks again!

[progress() not working with timeline lite and react]

Thanks so much, this is beautiful! This totally outputs the correct progress in the console.log. Just as one followup question, how can I access that progress number in the Controls child component so that I can feed it into my slider? Do I have to setState() in the body of the tlUpdate function or am I able to somehow call the progress() in the <Controls> component? Thanks again!

[progress() not working with timeline lite and react]

Thanks so much Rodrigo! I finally was able to replicate the issue in a Code Pen demo, check it out!

See the Pen RRLZgj?editors=0010 by anon (@anon) on CodePen

You can see that the demo plays just fine and I can restart it, but when I console.log the progress(), it gives undefined.

 

I tried playing around with your onUpdate callback and it definitely is on the right track because I start getting hundreds of console messages but they all give this error:

Uncaught TypeError: CreateListFromArrayLike called on non-object

[progress() not working with timeline lite and react]

Hi Everyone,

I am having an issue integrating React with Timeline lite. I can successfully play, pause, and rewind a timeline but when I try to read the current time using .progress() on the timeline object, I get undefined. I want that progress() function because I want to create a slider bar that will report the progress of the timeline and hopefully also allow for it to be adjusted.

 

My app is laid out like this, I have a container LectureLayout that has a draggableObjects container which itself has many draggable object components. I have a controls component which has the play, pause, reverse buttons. 

 

<LectureLayout>

   <DraggableObjects timeline={timeline}>

      <DraggableObject1>

      <DraggableObject2>

      <DraggableObject3>

   <Controls timeline={timeline}>

 

I create a TimelineLite() and pass it as a prop into the draggable objects and controls components. I load up all of the tween animations in the Draggable Objects container but since it is a prop of the LectureLayout container, I can read that successfully in the Controls component.

 

My main question is how can the .progress() function be returning undefined when I can use all of the other functions like play() and I can clearly see the timeline when I run a console.log

 

export class Controls extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  play(event){
    event.preventDefault();
    this.props.timeline.play();
  }

  componentDidMount(){
    console.log(this.props.timeline) //Successfully gives me a timeline object
    console.log(this.props.timeline.progress()); //This comes up as undefined
  }

  render(){
    console.log(this.props.timeline) //Successfully gives me a timeline object
    console.log(this.props.timeline.progress()); //This comes up as undefined
    
    return(
      <div>
        <Row>
            <ProgressBar/>
        </Row>
        <Row>
             <Button onClick={this.play.bind(this)} id="play">play()</Button>
        </Row>
      </div>
    )
  }
};