Greensock Javascript Library and Lectora

I'm trying to get animations using the greensock library working in Lectora.



Firstly, i'm loading the external javascript:





I also added the file using the Additional Files tab.



Then, I created a javascript function on my page as follows so i can call it in an action:



function runTween() {

TweenMax.to(image42, 1, {x:500});

}





image42 is the HTML name of the object i'm trying to animate. As a test, i'm just trying to get the object moving across the screen when i click a button. I have an action on a button that's calling the function ok but the code to animate the object isn't working.



Any ideas where i'm going wrong?



Do i need to create a variable in my javascript function to reference the image42 object? If so, how do i reference the object?



Any help is much appreciated.

Comments

  • leang
    leang Community Member Posts: 6
    Hello. The way I have GSAP setup is as follows.



    At the very top of the Title Explorer, add an HTML Extension object, give it the type Meta Tags, and paste this line:



    [/CODE]

    This ensures you'll always have the latest version, saves you the step of adding it as an additional file, and will allow you to use GSAP throughout your whole module.

    Now, to add the javascript tween function, add another HTML extension object at the [B]BOTTOM[/B] of the page where it resides. Code should look like this:

    [CODE]
    function runTween() {
    TweenMax.to("#image42", 1, {x:500});
    }
    [/CODE]

    There are a few ways to select image42. If you include jQuery, you can use $.("#image42"), but the latest version of GSAP will work with just "#image42". Quotes are required. Let me know how this works for you.

    Leang[CODE][/CODE]



    This ensures you'll always have the latest version, saves you the step of adding it as an additional file, and will allow you to use GSAP throughout your whole module.



    Now, to add the javascript tween function, add another HTML extension object at the BOTTOM of the page where it resides. Code should look like this:




    function runTween() {
    TweenMax.to("#image42", 1, {x:500});
    }
    [/CODE]

    There are a few ways to select image42. If you include jQuery, you can use $.("#image42"), but the latest version of GSAP will work with just "#image42". Quotes are required. Let me know how this works for you.

    Leang[CODE]

    function runTween() {

    TweenMax.to("#image42", 1, {x:500});

    }

    [/CODE]



    There are a few ways to select image42. If you include jQuery, you can use $.("#image42"), but the latest version of GSAP will work with just "#image42". Quotes are required. Let me know how this works for you.



    Leang
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Two caveats here:

    a) loading from a CDN means a http request to a 3rd party server. Not every LMS will allow that. At the very least, use a "//" request so it covers both http and https.

    b) executing your animation function before the document is ready will fail and cause problems, so make sure the DOM is loaded properly beforehand.
  • adriana
    adriana Community Member Posts: 35
    Hello,



    I`m just attempting to do this for the first time and is getting very confusing :-

    I'm fallowing all of the steps mentioned on the post but nothing happens.

    Can anyone explain me how to do it properly? Please



    Adriana
  • leang
    leang Community Member Posts: 6
    @ssneg 49188 wrote:
    Two caveats here:

    a) loading from a CDN means a http request to a 3rd party server. Not every LMS will allow that. At the very least, use a "//" request so it covers both http and https.

    b) executing your animation function before the document is ready will fail and cause problems, so make sure the DOM is loaded properly beforehand.


    Good points. The self-contained alternative would be to add the necessary js files as Additional Files and use the filename rather than full path in the script reference.



    @adriana 49193 wrote:
    Hello,



    I`m just attempting to do this for the first time and is getting very confusing :-

    I'm fallowing all of the steps mentioned on the post but nothing happens.

    Can anyone explain me how to do it properly? Please



    Adriana



    I've attached a zipped up example for you to check out. There is probably a much better way to structure everything and I would be interested to see how other people are doing it.



    [ATTACH]368[/ATTACH]



    Edit: While we're on topic, based on my testing, it seems like GSAP's tweening ability is limited to x, y, scale, and opacity. I haven't tested every CSS property, but I have not been able to get color, 3d, rotation, etc to work yet.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    @leang 49199 wrote:
    Edit: While we're on topic, based on my testing, it seems like GSAP's tweening ability is limited to x, y, scale, and opacity. I haven't tested every CSS property, but I have not been able to get color, 3d, rotation, etc to work yet.


    GSAP can animate (although 'tween' is more correct term) basically anything, including any css properties, including 3d, rotation, etc. Here's a jsfiddle demo for animation rotation-y: http://jsfiddle.net/brian_griffin/5Ltfg/