Share Posted March 29, 2019 I'm playing a sequence of images which I then want to reverse. This needs then to loop twice. I have the loop JS, but the documentation for .reverse(); doesn't initiate the reverse at the right time, it reverses it right at the beginning. If anyone could point out what I'm doing wrong that be great. Thanks!... Code here: tl.from(this.image_1, 3,{ alpha:1, ease: Power2.easeInOut }) .to(this.image_1, 1, { alpha:0, ease: Power2.easeInOut },'image_1') .to(this.image_2, 1, { alpha:1, ease: Power2.easeInOut },'image_1-=2') .to(this.image_2, 1, { alpha:0, ease: Power2.easeInOut },'image_2') .to(this.image_3, 1.5, { alpha:1, ease: Power2.easeInOut },'image_2-=2.5') .to(this.image_3, 1, { alpha:0, ease: Power2.easeInOut },'image_3') .to(this.image_4, 1.5, { alpha:1, ease: Power2.easeInOut },'image_3-=3') .to(this.image_4, 1, { alpha:0, ease: Power2.easeInOut },'image_4') .to(this.image_5, 1.5, { alpha:1, ease: Power2.easeInOut },'image_4-=3.5') .to(this.image_5, 1, { alpha:0, ease: Power2.easeInOut },'image_5') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_5-=4') .to(this.image_6, 1, { alpha: 0, ease: Power2.easeInOut },'image_6') .to(this.image_7, 1.5, { alpha: 1, ease: Power2.easeInOut },'image_6-=4.5') .to(this.image_7, 1, { alpha: 0, ease: Power2.easeInOut },'image_7') .to(this.image_6, 1.5, { alpha:1, ease: Power2.easeInOut },'image_7-=5') tl.reverse(0); Link to post Share on other sites
Share Posted March 29, 2019 Hi @icraig6666, One possible variant: use repeat. In addition, staggerTo can simplify the code. Here a simple example: See the Pen RObWxe by mikeK (@mikeK) on CodePen Please provide a CodePen available in the future. That makes it easier ... Happy tweening ... Mikel 1 Link to post Share on other sites
Share Posted March 29, 2019 Hi @icraig6666 You're seeing the correct behavior with your code. You've created the timeline and then reversed it from the end. That's what .reverse(0) does. Here's some more info about reverse: https://greensock.com/docs/TimelineMax/reverse() If you need two complete loops, I think the simple solution would be setting yoyo to true and repeat to 3. Like this: var tl = new TimelineMax({yoyo:true, repeat:3}); Hopefully that helps. 2 Link to post Share on other sites