Jump to content
GreenSock

stevenp

Multiple Instances On Same Page? [Solved]

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

[solved due to user error.]

 

Greetings,

As a JS newbie, I don't know what I don't know. Apologies in advance for my lack of knowledge.

I want to use two different JS animations on a page. Either of them work fine by themselves, but will not work together. I notice in the demos (from where I copied the JS syntax), a comment:
 

//we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.

That sounds like my problem, but I don't know what to do.

Here is my script:
 

    <script>
    window.onload = function(){
        var logo = document.getElementById("logo");
        TweenLite.from(logo, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

In the above, only the second script "works". When the second is removed, the first works. Can anyone show me where I can learn what I am not doing correctly? I have not found a practical explanation on multiple items.

I tried:

    <script>
    $(window).load(function(){
        var logo = document.getElementById("logo");
        TweenLite.from(document.getElementById("logo"), 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    });
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

Again, the second works fine, but the first does nothing. the image loads and does not move as expected.

Thank you in advance,

Steve

Link to comment
Share on other sites

    <script>
    $(window).load(function(){
        var logo = document.getElementById("logo");
        TweenLite.from(document.getElementById("logo"), 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    });
    </script>

    <script>
    window.onload = function(){
        var tagline = document.getElementById("tagline");
        TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn});
    }
    </script>

Yeah, that works just fine when one calls jquery in the header:

<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>

Ouch. I didn't know that jquery was not js. I don't know what I don't know.

 

That is embarrassing. :mrgreen:

 

Link to comment
Share on other sites

Glad you figured it out. I'll just mention, if you have jQuery on your page then you are probably best not swapping between $(window).load() and window.onload. The functions you pass to $(window).load() are added to a queue, so if necessary you could load 100 different files that all bound functions to $(window).load() and they would all get called (in the order that they were loaded). As another plus, if you try to bind another function with $(window).load() after the window load event, it will just get called immediately.

 

The jQuery folk thought of everything...

 

Also, (window).load() is very useful when you need to wait for all assets on the page to have loaded (images etc), but if your animation isn't affected by those assets, you can trigger them on $(document).ready() instead and your animations can start even sooner. (essentially, document.ready occurs once the html has been parsed to </body>, meaning that your entire HTML structure can now be rendered and manipulated as much as you like. window.onload occurs after all of the assets (e.g. <img>) referenced in the HTML have been loaded completely/)

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