Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraig6666

Play animation then reverse animation

Recommended Posts

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

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

 

  • Like 1
Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×