Play animation then reverse animation

[icraig6666 0 Likes (Newbie)]

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);

[mikel 3,989 Likes (Superhero)]

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

 

[PointC 11,945 Likes (Superhero)]

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.