Jump to content
GreenSock

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

TimlineLite - Loop 3 Times and insert "transition-tweens" between loop 1&2 and 2&3

Go to solution Solved by PointC,

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

Hallo,

 

I've tried the follwing code:

var i = 0;
var tl = new TimelineLite({
onStart:function() {
	i++;
	if (i <= 2) {
		this.set({}, {}, '+=1.0');
		this.to("#firstitem,#seconditem", 1.0, {autoAlpha: 0,ease:Power1.easeInOut});
	}
},onComplete:function() {
	if (i <= 2) {
		this.restart();
	}
}
});
tl.from("#firstitem", 1, {autoAlpha: 0, x:100,y:-100,scale:3.0,ease:Power1.easeInOut});
tl.from("#seconditem", 1, {autoAlpha: 0, x:50,y:-50,scale:3.0,ease:Power1.easeInOut});
// ... and so on

But it won't work. The first time OnStart is fired it changes the timlines for all following loops, included loop 3.

 

Thats what I'm trying to get: After every loop all animated elements has to fade out, except for the last loop. All animated elements should stay. Because of filesize I have to realise this with TimelineLite.

 

Thanks for your help!

 

Beste regards

Christi4n

 

 

 

 

Link to comment
Share on other sites

  • Solution

Hi christi4n :)

 

Welcome to the GreensSock forums.

 

There would be a few ways to make this happen. My personal approach would be to set up a function with an autoAlpha tween that gets called onComplete and run on the first two passes through. On pass three, that tween isn't run and everything stops. Something like this could work for you:

var i = 0,
    tl = new TimelineLite({onComplete:stayLit});

tl.set("#one, #two", {autoAlpha:1})
  .to("#one", 1, {x:100,y:100})
  .to("#two", 1, {x:100,y:100});

function stayLit() {
  i++;
  if(i<3) {
    TweenLite.to("#one, #two", 1, {autoAlpha:0, onComplete: function() {tl.restart()}});
  }
}

Here's a quick CodePen with that solution for you:

See the Pen MyZgao by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

PointC's - that helps a lot! Your Solution works great for me.Thanks!

Ohem, thanks for your effort, your solution looks good too, but I have to use TimelineLite.

 

Again, thanks a lot!

 

Best regards

Christi4n

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.
×