Getting started with GSAP Javascript in Lectora

Finishing up a project where i used a lot of Javascript to create interactivity and animation with GSAP, Greensock well known tweening library i try to show some techniques and how to get started with GSAP, Javascript and Lectora. Wanted to make a short easy sample. Well that failed 😉 its quite a bit longer then i intended to make. And maybe when someone dives into the code, it might seem complicated. Well keeping to the basics in this description at least. A few steps to follow to get your own GSAP tweens working.

–  Get the GSAP library and link it in your project. Either link to the url as described on the GSAP homepage ( http://greensock.com/get-started-js ) or include the files after you downloaded them as in my sample.

– Next identify the objects you want to animate ( CSS classname or HTMLname ) GSAP can animate both, for ease set the CSS names.

– Add a JS as HTML extension. Start your script. In the sample there is a page that shows quite well how the code for animating is setup.

– Preview or publish as html to test.

Well basically thats it… If anyone has any questions, i will be glad to answer

Preview image

Tags:

Comments

  1. Profile photo of Wendy Miller
    Wendy Miller

    Math, this is FABULOUS!! Thank you so much for putting this together and sharing it! I cannot wait to start digging into it! 🙂

  2. Profile photo of D S
    D S

    Hello, I’m testing Lectora 17 as a future eLearning creation tool. I’m very familiar with Greensock’s GSAP (Flash and JavaScript) and was glad to see that you can use GSAP in Lectora, so I’ve been testing it out. Seems to work fine when testing however, when I publish something, GSAP is not working in the final published output. Any ideas? Thank You!

  3. Profile photo of Math Notermans
    Math Notermans Post author

    Hi Dave,

    Several options that might prevent your title with GSAP from working properly, especially in version 17.

    – Do you use seamless play ?
    Case YES: it is published in a iframe, so you need to use to ensure you target the parent ( of the iframe )
    Case NO: are you including the proper libraries ?

    Easiest would be share a simple sample, and someone for sure will doublecheck and if possible fix it or get you some tip on whats wrong.

    Kind regards,
    Math

  4. ds

    Sorry, I was a bit busy and didn’t see your post. Thank you for the tip. I unchecked the “seamless tabbing” and GSAP now works with the published content. Of course now I can’t use “Seamless Tabbing”. More experimentation to come.

    Thanks,

    dave

  5. Profile photo of Math Notermans
    Math Notermans Post author

    In fact today fixing some things to work in seamless too…
    Basically this are the steps you need to do to get javascript based things to work with Seamless Play:

    1) check your code first for document and window.. and wherever this is used ensure it refers to the parent.
    For example:
    winW = window.top.innerWidth; ====> will become
    winW = parent.window.top.innerWidth;

    2) Next i most of my code i refer to the pageDIV. When using Seamless Play however publishing the document will ( why i dont know, some Lectora developer might know ) publish differently for different browsers. Chrome uses ‘pageDIV’, IE11 and Edge use the actual pagename ‘page2’ or something like that. To fix this you can use one of the functions Jennifer V. passed along a bit ago.
    For example:
    pageDIV = document.getElementById(“pageDiv”); ======> will become
    pageDIV = parent.document.getElementById( GetCurrentPageID() );
    or maybe even:
    pageDIV = GetCurrentPageDiv();
    The first one i tested and it works, the last one i didnot test yet.

    When you setup your code like this, it will work both in Seamless Play and in Non-seamless Play.

    Regards,
    Math

Your email address will not be published. Required fields are marked *