Bybos

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.

Here it is : http://codepen.io/djned/pen/jryEQV And the final version with all the timelines and functions : http://codepen.io/djned/pen/oLBgmJ << 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.

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.

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);