Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
5 years ago

Storyline360, Animation and GSAP ( Greensock )

Hi,

Trying to figure something out in SL360 i stumbled upon  the ds-bootstrap.min.js file thats added to the lib/scripts folder when publishing a Storyline360 file. In that file are GSAP(Greensock) references... some samples..
/*!
* VERSION: 1.11.8
* DATE: 2014-05-13
* UPDATES AND DOCS AT: http://www.greensock.com
*
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/

What i can find in that file that both GSAP CSS-plugin, easing and basic GSAP tweens are somehow used in Storyline.
Bad news however is that its a really old version they have implemented... from 2014... version 1.11.8, whereas the current GSAP version is version 3.5.1 !!!

Big advantages of the newer GSAP are mobile performance, speed and perfect control over SVG. So Storyline would certainly benefit from updating their internal used Storyline to the latest version.

As Storyline probably uses GSAP for all its animation features, the transitions and everything, i personally would really like it to have the control of GSAP in the hands of the frontend-user. I do use GSAP constantly in my elearning projects, but always have to add the newest version..

Is there an option to get the latest version of GSAP implemented in Storyline?
And can we have some better scripted control over Storyline elements...as you do use it already anyway?

Kind regards,
Math Notermans

 

storyline 360
    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member
      2 years ago

      Fixed.

      Added a ResizeHandler() that acts on every resize and shows width and height. Thus you can if needed calculate where what needs to be. 

      But using a temporary shape to reposition it to on the x is easiest.
      Added a fromShape... and in the ResizeHandler a gsap.set is used.
      gsap.set(lessArw, { x:gsap.getProperty(fromShape, "x") });
      Getting the x from the element.

      First attempt though failed... In Storyline shapes, images and groups all have different orientation points or origins. And that makes it going wrong.
      The fromShape probably calculates from its center, where a group uses the 0,0 point..thus getting unexplainable positions. Setting both orientpoints to 0,0 or top,left now...

      Thats working, so its fixed.

      • larryvanwave-ff's avatar
        larryvanwave-ff
        Community Member
        2 years ago

        I am so thankful for you sharing your knowledge and expertise on this! I really appreciate you and your ability to figure complex issues out.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    2 years ago

    PS.. Gsap code formatting is a bit different then TweenLite/TweenMax was.
    All code is backwards compatible, but better to adhere to newest approach.

    TweenLite.to(txtArea, .65 ,{y:pos1, ease: "back.out(3)", delay: 0});
    gsap.to(txtArea ,{duration:.65, y:pos1, ease: "back.out(3)", delay: 0});

    So main difference is all parameters inside the { }. And the duration has a label ;-)

Related Content