Search the Community
Showing results for tags 'timeline lite'.
Found 2 results
-
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> ) } };
-
Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.
