onComplete "loop" not working

[HyperNerd]

Hello,

 

I had this idea to use onComplete on a delayed function to create kind of a looping effect, but it appears that once I call a function from onComplete more than once, it stops. I suppose my idea isn't possible this way?

 

function fadeOne() {
TweenLite.to(a1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:two});
}

function two() {
$("#a1").hide();
$("#b1").show();
var b1 = document.getElementById("b1");
TweenLite.from(b1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut});
var b2 = document.getElementById("b2");
TweenLite.from(b2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut});
var b4 = document.getElementById("b4");
TweenLite.from(b4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeTwo});
}
function fadeTwo() {
TweenLite.to(b1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:one});
}
function one() {
$("#b1").hide();
$("#a1").show();
var a1 = document.getElementById("a1");
TweenLite.from(a1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut});
var a2 = document.getElementById("a2");
TweenLite.from(a2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut});
var a4 = document.getElementById("a4");
TweenLite.from(a4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeOne});
}

[GreenSock]

Sounds like a scope issue - try adding onCompleteScope:this to your tween(s) that have the onComplete.

[HyperNerd]

Thanks for the help, Jack! I tried this and the loop still stops once when I send it back to fadeOne again.

 

function fadeOne() {
TweenLite.to(a1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:two, onCompleteScope:this});
}

function two() {
$("#a1").hide();
$("#b1").show();
var b1 = document.getElementById("b1");
TweenLite.from(b1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut});
var b2 = document.getElementById("b2");
TweenLite.from(b2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut});
var b4 = document.getElementById("b4");
TweenLite.from(b4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeTwo, onCompleteScope:this});
}
function fadeTwo() {
TweenLite.to(b1, 2, {css:{opacity:0},delay:4, ease:Expo.easeOut, onComplete:one, onCompleteScope:this});
}
function one() {
$("#b1").hide();
$("#a1").show();
var a1 = document.getElementById("a1");
TweenLite.from(a1, 2, {css:{opacity:0},delay:.5, ease:Expo.easeOut});
var a2 = document.getElementById("a2");
TweenLite.from(a2, 3, {css:{opacity:0,},delay:.7, ease:Expo.easeOut});
var a4 = document.getElementById("a4");
TweenLite.from(a4, 1, {css:{opacity:0, scale:0,left:"-440px"},delay:1.3, ease:Expo.easeOut, onComplete:fadeOne, onCompleteScope:this});
}

[GreenSock]

Wait - it looks like you're creating conflicts by using jQuery to animate #a1 and #b1's opacity/visibility and also TweenLite to do the same thing. Why? Does it fix things if you remove your jQuery hide()/show() calls?

[HyperNerd]

Still stops after the first loop if I remove them. I'm using jQuery show/hide because of the way the page is structured. The div's replace each other.

[GreenSock]

Can you post a page that demonstrates the problem so we can see what's going on? The simpler the better.

[HyperNerd]

Thanks Jack, I messaged you a link to the dev site. The code in question is in js/panels.js

[GreenSock]

Oh, I think I see the problem - in your fadeOne() method, you don't define a1 (the target of the tween). It's null. Try adding this above that TweenLite.to() call:

var a1 = document.getElementById("a1");

 

You forgot the same thing in fadeTwo().

[HyperNerd]

Ah, good find! Still didn't fix the problem though.

[GreenSock]

Have you added console.log() calls inside each method to see if they're getting called and verifying that your targets are indeed what you expect to be passing each tween?

 

If you need more help, please create a simplified version that isolates the problem (rather than referring us to a page with lots of other stuff going on that could potentially be interfering).