Alexander75

I'm just trying to get it to reverse without offsetting the slides if clicked quickly. I've tried your suggestion and ended up with something like this on each timeline, switch (this.flag) { case 0: this.tl .seek(0) .clear() .to(this.card0.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card0.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card2.current, 0.7, { y: "-100%" }, "firstSlide"); this.flag += 1; this.tl.restart(); break; } It doesn't seem to be working for me. I'm going to try to specify fromTo values like you suggested.

I have paused set to true when i instantiate the timelines, thats why i had this.tl.play() I added clear() and restart() https://codesandbox.io/s/43zz6oky7x and it seems to be having the same issue, am i supposed to do something to the function that handles the reversal as well?

Thank you for your reply, i'm not entirely clear on where i'd put kill() or clear() ive tried adding it before and after the tls like this: not sure if thats what you mean.. you said before adding new stuff.. switch (this.flag) { case 0: this.tl .to(this.card0.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card0.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card2.current, 0.7, { y: "-100%" }, "firstSlide"); this.tl.play() this.tl.kill() this.flag += 1; switch (this.flag) { case 0: this.tl.kill(); this.tl .to(this.card0.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card0.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.firstChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card1.current.lastChild, 0.7, { y: "-100%" }, "firstSlide") .to(this.card2.current, 0.7, { y: "-100%" }, "firstSlide"); this.tl.play(); this.flag += 1;

https://codesandbox.io/s/k0q179orqv I thought i had this doing what i wanted it to...until i tried clicking the arrows quickly, when they're clicked too quickly the whole animation messes up, what is wrong with the way i'm approaching this animation? Is it something flawed with my execution of gsap? also, besides it being broken, there seems to be a pause between the time i click the down arrow and the animation actually firing, is there a way to fix this?

https://codesandbox.io/s/z21pkzpjkp I'm trying to recreate something I saw someone make, but in React. I'm running into a problem when attempting to animate. As you can see in the code sandbox, I have a card component. In the About.js the card component is rendered through mapping over an array that has the independent information to inject into the cards. The refs I need to access are created in the function "createCards" createCards(card, i) { return ( <Card id={i} key={i} card={card} info={this.state.aboutCards} ref={card => { this["card" + i] = card; }} /> ); } } So 3 references are made, card0, card1, and card2. Those are the refs I need to access, but I want to access them in Card.js if thats possible. So I can create a timeline and do all of the animations over there, because i'll be animating the image, and header. When i'm in Card.js and console.log(this.refs) in the component did mount I get 3 objects. The problem is i'm not sure how to use them in Card.js for example: class Card extends Component { tl = new TimelineLite({ paused: true }); *i dont know how to initalize as null here* componentDidMount() { this.tl.to("i dont know what to put here", 0.9, { y: 350, x: -400 }, 0.2); } render() { Or...should i be doing the animation in About.js? i've tried something like this: and it's not really working either... class About extends Component { constructor(props) { super(props); this.createCards = this.createCards.bind(this); this.tl = new TimelineLite({ paused: true }); this.card0 = null; this.card1 = null; this.card2 = null; } componentDidMount() { this.tl.to(this.card0, 0.9, { opacity: 0 }); this.tl.play(); }