Jump to content
Bybos

tl.seek with onComplete functions

Recommended Posts

Hi folks !

 

I'm stuck with the following code about tl.seek, can't go further from 17 seconds, I have to wait for the animation to complete to see what remains to be animated. It occurs when first "onComplete" starts...

 

I tried to add following functions with "tl.add( percent( ) );", but it becomes messy and doesn't work at all with message : "percent is not a function" in console. That's why all the last parts of the animation are in the percent function.

 

I also wanted to put the animation controllers from Timeline, but can't figure out how to make it properly for the whole timeline without destroying all the stuff...

 

Any help will be welcome, thanks !!

(function($){var tl = new TimelineMax();           
      leaderboard = $('.leaderboard');

    tl.add( loadIntro() )
    .add( loadContent() )
    .add( leaderBoard() )
    //here I tried to: .add( percent () ) <<< DISPLAYS "isn't a function in console"

    //tl.seek(17); //set play cursor <<< DOES NOT WORK AFTER leaderBoard function (as 18 and after)

      function loadIntro(){
  var tl = new TimelineMax({repeat:1, onComplete: loadContent})
      otherVars;

    tl
      .to(leaderboard,0,{autoAlpha:0})
      .etc;
      return tl;
}

function loadContent(){ 
  var tl = new TimelineLite()
      otherVars;

    tl
      .staggerFromTo(square, 0.5,{scale: 0.2, ease:Expo.easeOut},{scale: 1.1},0.12)
      .etc;
      return tl;
}


// Main Timeline

function leaderBoard(){
  var tl = new TimelineLite({onComplete: percent})
  otherVars;
  TweenLite.set(target, {opacity: 0});
  etc;
  
    tl
    .staggerTo(target, 0.7, {autoAlpha: 1, scale: 1,delay:0.2}, 0.5)
    .etc
    return tl;
}

function percent(){
  var tl = new TimelineLite(),
  otherVars;
  

function add20() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=111", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone})
}

function add40() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=189", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:4.5})
}

function add60() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"-=194", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:8.8})
}

function add80() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=94", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:13})
}

function updateHandler() {
  scoreDisplay.innerHTML = game.score;
}

add20();
add40();
add60();
add80();
  tl
    .add('percent')
    .to(jauge, 1.4, {autoAlpha:1, left:0, ease:Power4.easeNone}, 'percent')
    etc

    return tl;
};
})(jQuery);


    


Share this post


Link to post
Share on other sites

Hi Bybos,

 

Welcome to the forums. 

 

Do you think you could provide us with a reduced case example? It's very hard for us to visualise what you are trying to achieve by just looking at a bunch of code without any context to it.

 

I'm finding it hard just to read the code itself as it's got a rather chaotic indentation and line spacing style.

 

At a first, quick glance, it appears that one or more of your functions are not closed correctly but I can't be sure as I am not going to go and check all the lines looking for the opening and closing { };

 

  • Like 1

Share this post


Link to post
Share on other sites

Yup, a reduced sample would really help. Like dipscom, I'm struggling to understand what is expected to happen and what is causing problems.

If you can replicate the problem with just one or two functions that help you build the timeline with one or two tweens that would be great. The simpler the better. 

 

We're eager to help, we just need something to work with. Thanks for understanding.

Share this post


Link to post
Share on other sites

I can't tell if that's your actual code or pseudo code, but there's like an error on every other line. Most of the issues are your variable declarations. Using a single var to declare your vars is very error prone. You're missing a lot of comas.

http://danhough.com/blog/single-var-pattern-rant/

 

If you're getting that error, it means you're calling a function that doesn't return something that can be added to the timeline, like a tween or another timeline. Please provide a demo so we can better look at it. 

Share this post


Link to post
Share on other sites

Thanks for the support guys.

 

Context is that I tried to go further in my project (leaderboard banner for adwords) before checking your answers back, and the animation almost reaches the 30 seconds timeout from google adwords specs (and works fine).

 

Anyway, I tried to apply your advice for vars declaration and missing semicolons and I'm certainly missing something because the animation is messed up with "Uncaught SyntaxError: Unexpected end of input" message in the console, pointing on the last line of the script, whereas I did not have any error before and all seemed to work properly (except the tl.seek feature like said before).

 

That said, I try to make a light version of the first script, in order to show you how I made it (or not...) very, very soon.

 

Thanks again.

Share this post


Link to post
Share on other sites

Here it is : 

See the Pen jryEQV by djned (@djned) on CodePen

 

And the final version with all the timelines and functions : 

See the Pen oLBgmJ by djned (@djned) on CodePen

<< no bug for the loader in browser...

 

I did declare vars and write timelines as explained in the G101 vidéos from iHateTomatoes website and it works fine.

 

Did I miss something ?

 

Hope this helps. Thanks.

Share this post


Link to post
Share on other sites

hmm, I'm a bit more confused by the 2 demos. They don't seem reduced at all.

 

In the first one I saw your comment about seeking after 6. It seems the timeline's duration is only 6.3 seconds so I'm not sure what you mean to do

 

this is my test:

tl.seek(7); //try to set player after "6"...
console.log(tl.duration()) //6.3

In the second example I think a key problem is that you are calling a bunch of functions that create tweens with delays but these tweens are not inside your main timeline. They are just running on their own. So if you seek() somewhere in the main timeline, those tweens will not be affected and they will get in the way.

 

These are the functions and tweens I'm talking about

 

function add111() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=111", roundProps:"score", onUpdate:updateHandler, ease:Power2.easeOut});
}

function add300() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=189", roundProps:"score", onUpdate:updateHandler, ease:Power2.easeOut, delay:4.2});
}

function add60() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"-=194", roundProps:"score", onUpdate:updateHandler, ease:Power2.easeOut, delay:8.2});
}

function add80() {
  TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=94", roundProps:"score", onUpdate:updateHandler, ease:Power2.easeOut, delay:12.2});
}

function updateHandler() {
  scoreDisplay.innerHTML = game.score;
}

add111();
add300();
add60();
add80();

All of those animations could be put in a timeline that then gets placed in the main timeline. I think that will solve some of the issues.

Unfortunately I can't dig through 100 lines of a 15 second animation and try to fix. 

  • Like 1

Share this post


Link to post
Share on other sites

Ok, thanks a lot Carl.

 

My code is not reduced indeed and I fully understand and apologize for it. Sometimes I can get lost into my own work because I tend to rely on what seems to work at the first sight without caring about syntax or clarifying the code.

 

I try to fix this very soon with what you've found.

 

Thank you again.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.