Search code examples
jquerymeteorgsap

Using Greensock with Meteor


I'm carrying on my learning of Meteor, it's slowly coming together and I'm building something away from the tutorial. I wanted to include some additional non-functional JS for animation etc and decided upon Greensock as I'm familiar with it. I've included the CDN to TweenMax in the body of my main.html and have been calling it from within a template helper.

Main.html:

<head>
<title>NO-TEA-FY</title>    
<link rel="stylesheet" href="css/noteafy.css" id="stylesheet">

Template:

<template name="mainInit">
<div class="teaContainer">
    <h1 class="superJumboHeader">Tea</h1>
</div>

Template helper:

$(document).ready(function(){
    // If the user doesn't click on Tea within 3 seconds of arriving, shake the word
    setTimeout(function () {
        var teaCont = $(".teaContainer");
        TweenMax.to(teaCont, 1, {css:{"margin-top":"25%"}, ease:Power3.easeOut});
    }, 3000);
});

The Jquery is functioning without error but I get:

Uncaught ReferenceError: TweenMax is not defined.

I'm wondering why TweenMax cannot be found but JQuery can?

Thanks.


Solution

  • I have tried answer the same at the GSAP forum : http://forums.greensock.com/topic/9575-using-greensock-with-meteor/#entry38773

    To be able to load GSAP from CDN, you'll need to install the Meteor plugin called External File Loader.

    Use:

    mrt add external-file-loader 
    

    to install the plugin.

    Here is the method you'll need: Method loadJs(url, callback, timeoutDelay) - Load external JS from a url. Callback is called once the url has been loaded. TimeoutDelay is the delay before timeout, in ms. Callback and timeoutDelay are optional. The method returns a jQuery promise. If you are using Iron router, it is best you load your external script on the waitOn() function to make sure they are loaded before the page loads. If you are not using Iron-Router, you can load the GSAP CDN with external file loader in the Template.created() callback.

    Template.Templatename.created = function() {
    Meteor.Loader.loadJs("//cdnUrl");
    }
    

    You can load multiple script as well. I have personally created a local GSAP plugin for meteor that I use. That's because I have a premium Greensock membership. I'll see if I could put up a free version of GSAP plugin up on Github.

    I hope it helps,

    Praney :)