Jump to content
Search Community

Play animation then reverse animation

icraig6666 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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.
×
×
  • Create New...