Jump to content
GreenSock

LeClou

condition "if" don't work

Go to solution Solved by LeClou,

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

When i trie to use a if fonction like

 

var sesSto1 = sessionStorage.getItem("abeille");

 

function monster(){
if(sesSto1==1){
master1();
}
else{master();}
}
monster();
 
two animations start at the same time and seek() buttons don't work
 
Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.p.add @ TweenMax.js:813master1 @ demo1.js:2315monster @ demo1.js:2900(anonymous function) @ demo1.js:2904n.event.dispatch @ jquery-1.11.0.min.js:3r.handle @ jquery-1.11.0.min.js:3
 
I want to start the master timeline at different seek() position when the window open.

See the Pen NxqBPY by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello LeClou and welcome to the GreenSock Forum!

 

It could be a number of things causing this. So to better help you can you please setup a codepen demo example so we can see your code in context and in a live editable environment.

 

Here is a video tut by GreenSock on how to create a codepen demo example:

 

 

:)

  • Like 3
Link to comment
Share on other sites

When i trie to use a if fonction like

 

var sesSto1 = sessionStorage.getItem("abeille");

 

function monster(){
if(sesSto1==1){
master1();
}
else{master();}
}
monster();
 
two animations start at the same time and seek() buttons don't work
 
Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.p.add @ TweenMax.js:813master1 @ demo1.js:2315monster @ demo1.js:2900(anonymous function) @ demo1.js:2904n.event.dispatch @ jquery-1.11.0.min.js:3r.handle @ jquery-1.11.0.min.js:3
 
I want to start the master timeline at different seek() position when the window open.
 

See the Pen xZGVex by anon (@anon) on CodePen

 

here is my code

i also try to put the if in the master() like this 

 

 function master() {
 
      var timeline = new TimelineMax({
        repeat: 0,
        delay: 4
      });
      timeline.add(act1())
        .add(act1a());
      if(sesSto1==1){timeline. .seek(11);}
}
Link to comment
Share on other sites

Thanks for the codepen. We really only need the GSAP code since you have a lot of other stuff to comb through to see what is happening. All we really need is just the GSAP code to isolate the possible issue.

 

I am seeing a lot of Failed to load resource errors for all the sound files not found, as well as image files for yoru img tags are not found

 

So I'm not even seeing the Uncaught Cannot add undefined error?

Link to comment
Share on other sites

See the Pen VeLjXz by anon (@anon) on CodePen

 

I remove most of the images and all the sounds. You won't have the bug if the sessionStorage "abeille" is not at 1.

I also try 

 

if(sesSto1==1){

act1a();
}
else{master();}
}
 
it work well but I need item of the first  animation to be in place.
Link to comment
Share on other sites

I'm not seeing any undefined timeline error.

 

In your codepen, i dont see where you are setting the sessionStorage.setItem() .. so the sessionStorage will always be 0

Link to comment
Share on other sites

the storage session item come from an another page the index.

 

$(window).load(function() {
 
$info = $("#info");
 
$info.click(function(){
sessionStorage.setItem("abeille","1");
document.location.href = "demo1.html" 
});
});
Link to comment
Share on other sites

Hi LeClou,

 

I am having the same experience as Jonathan. I would like to help but you really need to provide a reduced test case that clearly replicates the error.

 

This is a great article that explains what a reduced test case is: https://css-tricks.com/reduced-test-cases/

 

In addition to there being a lot of code that isn't related to the problem, your demo does not produce the error about something being undefined.

 

Some tips for proceeding and getting the best help from us:

 

  1. instead of referencing a bunch of images that aren't loading, use simple divs with background colors
  2. if you are generating a timeline with 20 tweens, just cut that down to 1 or 2 tweens.
  3. don't rely on extraneous things like session cookies, just use variable that can be set to true or false that we can change to simulate 1 or 2 conditions.
  4. try to use English in your buttons
  5. add some comments to your code that explain what you expect to happen or some instructions on how to use the demo

The crux of the problem is that we see 200 lines of code that we have never seen before and its very difficult to try to guess what it is supposed to do.

 

I'm confident we can help get you on the right path once we can clearly see the error and where it is being caused.

  • Like 5
Link to comment
Share on other sites

Thank you for the help.

 

I will come back to you later in the month. I realy need to open a window whit a part of the animation done, using the "seek" fonction depending on " if" condition.

May be it is not possible! 

Link to comment
Share on other sites

What i want to do is to open a window in the middle of an animation coming from the index. I will have ten seek() position on the timeline . I only need the first animation to be done.

 

The index js is:

 

$(window).load(function() {

 
$info = $("#info");
 
$info.click(function(){
sessionStorage.setItem("abeille","1");
document.location.href = "demo1.html" 
});
});
 
I put a button to simulate the sessionStorage.setItem("abeille","1") done on the index.
 demo1.html=Codepen
 
if you use that button and push the Fork button you got:
 
Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.d.add @ TweenMax.min.js:14master @ pen.js:119(anonymous function) @ pen.js:126n.event.dispatch @ jquery.js:4430r.handle @ jquery.js:4116
 
I also try do duplicate the master and add it  start on the "if" condition like this:
 
function monster(){
if(sesSto1==1){
master1();
}
else{master();}
}
monster();
 
Thank you for the help and exuse me for my bad english hope you can help me.
Link to comment
Share on other sites

Yes well i did what you ask me, reduce 7000 lines into a few lines whit block instead of image. And i add a button so you can see what's happening when sessionStorage item have a value.

 

Sorry may be i had to continue on the same topic!

 

Is it some thing i am doing wrong. The logic of the code look ok it's simple and i don't understand why it's not working

 

 

Thank you

Link to comment
Share on other sites

I merged both topics so this way both topics stay together. Im not near my computer, when i am i will take a look at

See the Pen NxqBPY by anon (@anon) on CodePen

 

:)

Link to comment
Share on other sites

I just checked and i still do not see the console error.

 

What steps do we have to take to reproduce the error you are seeing?

Link to comment
Share on other sites

I add a button to simulate the sessionStorage.setItem("abeille","1"). it is call sessionStorage on the left side of the window.

 

if you push that button and after push the Fork button of Codepen you get  the error on the console.

 

May be my english is not good i hope you understand.

Link to comment
Share on other sites

I didn't see any console errors either until I forked the pen. If you do like the OP is suggesting in Post #15 - click the button and then fork the pen, as soon as the animation starts in the new forked pen the following error does come up in the console.

Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.
d.add @ TweenMax.min.js:14
master @ pen.js:119
(anonymous function) @ pen.js:126
n.event.dispatch @ jquery.js:4430
r.handle @ jquery.js:4116
  • Like 1
Link to comment
Share on other sites

I am not seeing this error message even after following the steps to reproduce it. I tested on Windows 7 (64-bit) in both latest Chrome and Firefox.

 

All i got in the console after forking the pen was 13 Mixed Content error messages .

 

This is probably a codepen issue! I would recommend viewing and testing your codepen example in either debug mode so it runs outside of an iframe, and also in full page mode. And see if you still get that error. I'm unable to reproduce this unless others like PointC can too!

Link to comment
Share on other sites

So there is nothing to do. It will be hard to live whit that bug. 

 

Thank you for trying.

 

P.S. This is not a codepen issue it is a bug i do not no.

Link to comment
Share on other sites

Hi there :),

 

The problem is on line 131 of your Javascript. That section is function act2() - which I've pasted a bit of below. Once you click the session storage link and effectively set that variable to 1 - then you fork the pen with that variable set to 1, but the function has a return if sesSto1 == 1 (which returns a true at this point) so it bails out and never returns that timeline so you get undefined when you try to add act2() to the master timeline. 


function act2() {
    var le = new TimelineMax();


    le.to($sqare5, 0.1, {
      autoAlpha: 1,
      delay: 2
    }, "y");
    le.to($sqare5, 1, {
      x: 200,
      y: 80,
      z: 0,
      delay: 2
    }, "y");
    le.to($sqare6, 0.1, {
      autoAlpha: 1
    }, "ya");
    le.to($sqare6, 1, {
      x: 380,
      y: 80,
      z: 0
    }, "ya");
    le.to($sqare7, 0.1, {
      autoAlpha: 1
    }, "yac");
    le.to($sqare7, 1, {
      x: 560,
      y: 80,
      z: 0
    }, "yac");
    le.to($sqare8, 0.1, {
      autoAlpha: 1
    }, "yach");
    le.to($sqare8, 1, {
      x: 740,
      y: 80,
      z: 0
    }, "yach");
    le.staggerTo($t, 0.5, {
      autoAlpha: 0
    }, 0.5);
    if (sesSto1 == 1) {
      sessionStorage.removeItem("abeille");
      return;
    }
    return le
  }

Just change the last bit to this and it works just fine. No bugs at all.  ;)

    if (sesSto1 == 1) {
      sessionStorage.removeItem("abeille");
      return le;
    }
    return le
  } 
Link to comment
Share on other sites

PS - you don't have to fork the pen to see this work. Just add a 'Run' button to your pen so can click your storage button and then click Run and the timeline seeks just as you'd expect it to. :)

 

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

Link to comment
Share on other sites

PointC thank you for your help but

Just remove return and it work i know that.

 

 

if(sesSto1==1){

sessionStorage.removeItem("abeille"); }

return le;

}

 

But i need the animation to stop at the end of act2() because in my project there is act1() to act23().
Link to comment
Share on other sites

oh it is my error impossible to stop the animation this way. What can i do to stop it at the end of act2(). 

Link to comment
Share on other sites

Well - the correct return of the timeline in that function has stopped the error you were seeing. I didn't know there were additional objectives.  ;-)

 

So your master timeline has 23 timelines returned by functions and once the viewer has seen all 23 of them, they should only see 1 & 2?

 

If you try to seek to a time of the master timeline, but you've made changes to any of the nested timelines, your seek to a specific time might not go to the right position. You could add labels to the master timeline and play to the label at the end of act2(), but since your secondary timeline only has two nested timelines I think if it were me, I'd set up a master time line and a mini timeline for easier management.

 

Create two new function to create your master and mini timelines and just .add() all 23 acts to your master and then make a mini master timeline with acts 1 and 2. Then your if/else would look like this:

 

  function master() {

    if (sesSto1 == 1) {
     miniTimeline.play();
    } else {
     masterTimeline.play();
    }
  }

:)

  • Like 1
Link to comment
Share on other sites

I'm still confused what you are trying to do, and why do you need a master timeline? And your errors are happening because you are not returning something to add to the timeline. If you're not going to return something, don't call it.

function act2() {

  var le = new TimelineMax();
  // ...    

  // Not needed
  /*if (sesSto1 == 1) {
      sessionStorage.removeItem("abeille");
      return;
  }*/

  return le;
}

function master() {
  var timeline = new TimelineMax({delay: 0 });
  timeline.add(act1());
    
  if (sesSto1 == 1) {
    sessionStorage.removeItem("abeille");
    timeline.seek(0);
  } else {
    timeline.add(act2()).seek(4);
  }      
}
  • Like 1
Link to comment
Share on other sites

@Blake - From what I understand, the OP is trying set a local storage session variable so a return visitor doesn't have to sit through the entire timeline (23 pieces) when they revisit. He had the if/else in the the same function that created one of the nested timelines and that was causing problems, but now it looks like help is needed with what to show a return visitor.

 

Since he's creating all the nested timelines in functions, he could then have a big timeline with nested 1-23 and a small one with nested 1-2. I suggested two master timelines for future flexibility. Maybe in the future there would be a need to change the mini (repeat visitor timeline) to nested 1,2, 7 and 23 etc...  

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