Jump to content
Search Community

GASP for E-learning

weblongo 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,

I have had some success at getting GASP to work with adobe captivate with this code below using xampp

and loading the library with this

 

function addScript( src ) {
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  document.body.appendChild( s );
}
addScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js');

 

then this

TweenMax.to("#textbox1", 2, {backgroundColor:"#4286f4", width:"50%", top:"100px", ease:Power2.easeInOut});

 

What happens is that the textbox1 remains where it is and the background colour animates perfectly - so i know the library is loaded

my problem is getting the reference to the object in captivate.

 

Now this is a bit chicken and egg as the captivate community don't really get how awesome GASP is - and the Greensock peeps

don't realise how cool captivate is and how many devs there are whose head will explode when they see it working :)

 

I have examples i can share- but can't get down to the size i can sent via email if anyone wants to push this forward.

 

thanks

 

M

 

Link to comment
Share on other sites

Howdy @weblongo - welcome to the forums. It sounds like maybe your element doesn't have its "position" CSS property set to "absolute" or "relative" (which is necessary for browsers to render changes to top/left properties). Weird, I know. It has nothing to do with GSAP. But don't worry - there are likely two solutions: 

  1. Use "y" instead of "top", and that'll make GSAP apply it using transforms which don't require any other special CSS properties to be set in a certain way. Note: transforms are RELATIVE to the original position in the document flow, NOT absolute coordinates. So, for example, y:100 would make any element move 100px down from where it was originally in the document flow. Also note: transforms are generally considered to be more performant for animation because they don't affect document flow (so they're cheaper for the browser to calculate). 
  2. Just add position:"relative" to your tween (or do a set() call beforehand). 

Does that help at all? 

  • Like 2
Link to comment
Share on other sites

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