Jump to content
Leang

GSAP tweens in Lectora

Recommended Posts

Hi all. I've recently been adding GSAP to some elearning modules built with Lectora and they're looking great. The problem I'm encountering is that the CSS properties that actually tween are limited to mainly x, y, scale, and opacity. Color, rotate, 3D, etc don't seem to take effect. I'm wondering if it's because the CSS that is autogenerated by Lectora is somehow taking priority over GSAP and preventing certain properties from animating. Does anybody have any ideas?

Share this post


Link to post
Share on other sites

I'm not at all familiar with Lectora unfortunately, so I don't think I can be of much assistance here - have you asked the Lectora folks?

 

Keep in mind that GSAP just edits regular css properties on DOM elements' style object, so it isn't as if it's doing something really proprietary. It just gives you a much more convenient syntax and timing model and manages a bunch of other stuff that would normally be a pain in the butt. At its heart, though, it's just setting properties multiple times per second. So if you can't do 3D stuff with GSAP, you could just try doing it manually first to see if Lectora allows it at all. Like:

 

yourElement.style.color = "#FF0000";
yourElement.style.backgroundColor = "#0000FF";

If that works, you should be able to tween those like:

 

TweenLite.to(yourElement, 1, {color:"#FF0000", backgroundColor:"#0000FF"});

Just make sure you've loaded the CSSPlugin and TweenLite of course. 

 

Does Lectora run in a regular web browser or does it use something proprietary? 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the response! Unfortunately, the Lectora team aren't very approachable. Emails go unanswered and their forums are very inactive. Lectora creates training modules that run in standard browsers and the files seem like they're standard html and css files, but there is a lot of auto-generated code. First thing Monday morning, I'll give your examples a try to see if they take. I did some more tests earlier this afternoon and css code behaves erratically. I can give a div rounded corners with css, but can't tween the corners with TweenMax.

 

TweenMax.to(box, .75, {x:50, borderRadius:"25px", opacity:.5});

 

The x and opacity work fine, but borderRadius is ignored. Very strange.

Share this post


Link to post
Share on other sites

I plan to look at GSAP usage in Lectora soon. I know that when applying custom css you really need to be using the web inspector in Chrome or Firebug in Firefox, because if you are trying to add the styles directly to the object with the matching Lectora HTML Name then you may not be getting the results you want. For example when targeting a Lectora Image object that has an html name of Image1318, you actually want to alter "#Image1318 img" so you get at the img within the html name div.

 

lectcss1.png

 

Check out my Inspiration Wednesday session about using CSS in Lectora. Go here, http://lectora.com/why-e-learning-learning-training-tips/recorded-webinars then in the playlist (right side of video player) find the video called "Using CSS in your Lectora Titles". 

 

Also you can check out my Shared Online Library Object, to insert it while in Lectora vX go to Tools > Library Objects > Insert an online Library Object. Then go to the CSS section and select the "CSS Demos - IW.awo"

 

lectcss2.png

 

lectcss3.png

 

Hopefully I can get some time to play around with GSAP in Lectora and see if there are any other nuances or restrictions.

  • Like 1

Share this post


Link to post
Share on other sites

Hey guys. Just to follow up with my original problem, Tim Kindberg is right. Lectora allows us to give objects on stage a class name, but the autogenerated code is more specific in their css selection than our assigned class names. My original goal was to create reusuable objects attached to GSAP animation, but it looks like I'll have to create the content, generate the page, and crack open the source code to get the proper selectors. It's semi possible with jQuery selectors.

 

TweenMax.to(".text93Font1"), .4, {color:"#FF0000});

vs

TweenMax.to($("div.question > p > span"), .4, {color:"#FF0000};

 

It still requires me to check the HTML structure, but it's progress. Color, skew, and rotation now works, though I haven't gotten any 3D properties to tween in Lectora yet.

  • Like 1

Share this post


Link to post
Share on other sites

Hi, 

so cool to find someone who wants to combine GSAP and Lectora. @Leang, did you know that you can see object HTML names from inside Lectora before you publish? Select the object, click on Properties tab, then click or hover on a tiny arrow in the bottom-right corner of the left-most menu section.

 

Screen_Shot_2014_05_07_at_17_02_21.png

 

Share this post


Link to post
Share on other sites

Sergey, have you tried to use Draggable with images in Lectora? I can TweenMax them but I cant drag or rotate them? I know the link to Draggable works because I can make text blocks rotate. Any idea's?

Share this post


Link to post
Share on other sites

I just tried building a quick example in Lectora 12.0.2 and it worked. I simply included both scripts as Ext Object:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/utils/Draggable.min.js"></script>

Created two textboxes on the page with classes "dragme" and "spinme". And then ran this JS on Page Show:

Draggable.create(".dragme", {type:"x,y", bounds:"#pageDIV", throwProps:true});
Draggable.create(".spinme", {type: "rotation", throwProps: true});
And it worked. One is draggable, another is spinnable.

Share this post


Link to post
Share on other sites

Hi Sergey, thanks for the reply. The issue is not with textbox objects. I mentioned in my post that I can get them to work; it's images and shape objects that do not work. They can be tweened but do not work with draggable.

 

I don't know if it is because they are made on the fly? I tried every idea I could think of including attaching the scripts to the end of the page and hooking them by class.

 

I see in the exported html that the images and shapes become new objImage instances while textboxes become objInline instances. I briefly looked through the travantis-inline.js and travantis-image.js to see the functions creating the instances but could not pinpoint what is locking down the objImages.

 

By the way, in case anyone else is trying to get this to work, throwProps is only available to paid Greensock memberships (I'm business green) you'll need to leave it false or the script will throw and error (no pun intended).

Share this post


Link to post
Share on other sites

Did you intend to attach a file? I didn't see one. 

 

Also, I built Draggable so that even if you set throwProps:true you shouldn't get an error if ThrowPropsPlugin isn't loaded - it should silently fail. 

 

Please make sure you're using the latest version of Draggable too. If you're still having trouble, it'd be most helpful if you could provide a sample codepen or a set of files that we could dig into. 

Share this post


Link to post
Share on other sites

I'm apologize, Jack. I misspoke of throwProps causing an error if not loaded. Thank you for the correction. Here is an export from Lectora that shows a text block working with Draggable and an arrow shape image that does not.

Share this post


Link to post
Share on other sites

It looks like the problem is that the element you're trying to drag is in an <a> which is a "clickable" element (a link). By default, Draggable doesn't drag clickables because some people would consider that a usability issue, but it's easy to fix - just add dragClickables:true to your config object and you'll be golden. :)

Share this post


Link to post
Share on other sites

Jack, you are incredible! Thank you! You just made my job fun again.

  • Like 1

Share this post


Link to post
Share on other sites

keen to get this working in captivate 2017 - have had some success i can load the library and get some elements of tweenmax working but not others. Hope someone can take this forward

 

mike 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.