Home/ Questions/Q 8082953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T17:17:39+00:00

I’m relatively new javascript, but I am comfortable in other languages. I’m trying to

  • 0

I’m relatively new javascript, but I am comfortable in other languages. I’m trying to use the Greensock timeline to construct modular sequences to reduce code duplication. I’m trying to have a singleton timeline that is accessible by all my functions. I tried just using a global var and attaching to() methods to it. That worked in chrome and iexplorer, but not Firefox. I received a “this.timeline is null” error in the Firefox error console. Then I tried this:

var TL = (function() {
  var tl = new TimelineMax();
  function returnInstance() {
    return tl;
  }
  return {
    inst: function() {
      return returnInstance();
    }
  }
})();

This made the singleton I want, but I get the same error only in FF. The code below works fine in both chrome and iexplorer:

dev.html:

<html>
<body>
  <-- Page content... -->
  <script type='text/javascript' src='js/jquery.js'></script>
  <script type='text/javascript' src='js/TweenMax.min.js'></script>
  <script type='text/javascript' src='js/foo.js'></script>
  <script type='text/javascript'>
    $(document).ready(function(){
      init();
    });
  </script>
</body>
</html>

foo.js:

  //...singleton code from above...
  function init(){
    do1();
    do2(-2);
  }
  do1(delay){
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#bar"),2,{css:{autoAlpha:1}},delay);
  }
  do2(delay){
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#canv"),2,{css:{autoAlpha:1}},delay);
  }

So, this will make #bar and #canv enter at the same time (if I call do2(0); then #canv will come in after #bar is done).

Do you have any insight into what I’m doing wrong or why FF is handling the code differently?

Thanks for your help.

EDIT1

Browser Versions:
Chrome(19.0.1084.56)
Internet Explorer(9.0.8112.16421)
Firefox(13.0)

EDIT2

The error generates from inside of the TweenMax.min.js file.

EDIT3

Before trying to use a global timeline and a singleton, I implemented the desired functionality by passing a TimelineMax reference to each function and returning the updated TimelineMax. So, my code looked a little like this:

foo.js

function init() {
  var tl = new TimelineMax();
  tl = do1(tl);
  tl = do2(tl);
}
do1(TL){
  TL.to(...);
  return TL;
}
do2(TL){
  TL.to(...);
  return TL;
}

This seemed to work fine in Firefox, but it’s a little more tedious to play hot potato with the timeline object. Is that the preferred method? Where can I find well formed coding standards and best practices for javascript?

EDIT4

Here is the full non-working code. It works as expected in both chrome and ie, but I receive an error in FF coming from the TweenMax.js library.

dev_page2.html:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="css/dev.css">

    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #main {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body class="whiteBG">
    <header class="center">
        <div id="bar" class="invisible">
            <nav>
                <!-- nav elements here... -->
            </nav><!-- nav -->
        </div><!-- bar -->
        <canvas id="ani" class='invisible center' width='840' height='420'></canvas>
    </header><!-- End header -->
    <section id="main">
    <div id="content" class="center">
            <p>
            </p><blockquote>
            </blockquote><p class="signature">
            </p><p class="float-left">
            </p><p class="float-left">
            </p>
        </div> <!-- End content -->
    </section>
    <footer class="invisible center">
        <div id="footerLeft">
        </div>
        <div id="footerCenter">
        </div>
        <div id="footerRight">
        </div>
    </footer><!-- End footer -->
    <script type="text/javascript" src="js/Jquery.js">
    </script>
    <script type="text/javascript" src="js/TweenMax.js"></script>
    <script type="text/javascript" src="js/dev2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            init();
        });
    </script>
</body>
</html>

dev2.js:

// Copyright 2012 Gray Designs. All Rights Reserved.
/* 
 * @author rocky.grayjr@gmail.com (Rocky Gray)
 * @date May 13, 2012
 */

function init()
{
    enterNavBar();
    drawCanvas();
    enterCanvas(-2);
    enterFooter(-1);
}

var TL = (function() {
    var tl = new TimelineMax();
    function returnInstance() {
      return tl;
    }
    return {
        inst: function() {
        return returnInstance();
    }
    }
})();

function enterNavBar(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    //nav bar fade in
    gTL.to($("#bar"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("#bar").removeClass('invisible');
    }},delay);
}

function enterCanvas(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    gTL.to($("#ani"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("#ani").removeClass('invisible');
    }},delay);
}

function enterFooter(delay)
{
    delay = delay || 0;
    var gTL = TL.inst();
    //nav bar fade in
    gTL.to($("footer"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
        $("footer").removeClass('invisible');
    }},delay)
}

function drawCanvas()
{
    //var canv = document.getElementById("ani");
    var $canv = $('#ani'); 
    var ctx = $canv[0].getContext("2d");
    ctx.fillStyle="#000";
    ctx.fillRect(0,0,840, 420,0);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It sounds like you might be using an outdated version of the GreenSock files. This sounds like an issue that was very rare and was fixed in a more recent version (my apologies for any hassles). Would you mind downloading the latest and trying again? http://www.greensock.com/v12/

    • 0