Jump to content
Search Community

GSAP tweens in Lectora

Leang test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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
Link to comment
Share on other sites

  • 1 year later...

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

 

Link to comment
Share on other sites

  • 9 months later...

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.
Link to comment
Share on other sites

  • 2 weeks later...

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).

Link to comment
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. 

Link to comment
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. :)

Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...