Improved Animations for Lectora Online

xithis
xithis Community Member Posts: 66
I've been working on a new project, and I wanted to integrate better animations. You can do the same!

First load this javascript from here and put it as an external script (top of file):

<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script&gt;
<script src='TweenMax.min.js'></script>

Then here is a custom script that I wrote to animate groups within Lectora.  You just call the javascript like this: lectoraAnimate(nameofgroup,'typeofanimation','direction');  I'll be adding more to this as I get requests from coworkers, but this works for our needs right now. You can repurpose this and change it to a CSS name, and use it as well to animation CSS named things.

Code:
https://jsfiddle.net/fh0c27yy/

It basically finds all the objects in a group and animates them together. We are using it to animate many 'cards' on a page, so it looks more flashy and less flickering between pages because we have less pages. This does work with Lectora Online 3 as well.

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    I wish GSAP (GreenSock) was an integral part of Lectora, this is how good it is!
  • towers9815
    towers9815 Community Member Posts: 72
    I don't like to say this but I miss Storyline 2.0 (so Sorry). Lectora's current animations are so PowerPoint 2004.

    Some great stuff there.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Storyline2 lacks heavy on Javascript support, and with GSAP you can make any animation you need/want ;-)
  • xithis
    xithis Community Member Posts: 66
    Yeah GSAP is awesome.  I've updated to code to account for some other elements that arent accounted for earlier (forms in particular),

    https://jsfiddle.net/fh0c27yy/2/

    I'll put together some Lectora specific examples after I'm done with this project.  But these work in lectora too:

    https://greensock.com/?example=sortable-grid-using-draggable

    https://greensock.com/multipletextshadows
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    <h1>Hi Sergey</h1>
    When you get a chance are you able to send through some instructions on how you got the simple Greensock Draggable java to work in Lectora. Did you add the Draggable js file to the Title level - if so how did you do this. How was the js code placed for the text box. I have followed the instructions on the Greensock website but could not get it to work. All I want to do is drag an object around the screen.

    If you are able to assist it would be very much appreciate.

    Thanks

    Dan
  • dcarroll3658
    dcarroll3658 Community Member Posts: 20
    Hi there

     

    Wow that look great. Are you able to break down where the various pieces of code go in Lectora?

     

    Thanks

    Dan