Jump to content


  • Posts

  • Joined

  • Last visited

1 Follower

About Math

Recent Profile Visitors

3,175 profile views
  1. Math

    Position issue

    This is a Storyline problem and has little or nothing to do with GSAP. As Storyline creates its own scope for every trigger in it... when you add a element in the Storyline editor... it will behave properly on scaling...as the core of Storyline can access it. So you can use static elements and calculate the wanted endposition for GSAP tweens by using gsap.getProperty( mystaticElement.x) Storyline itself uses eventHandlers in its slides.min.js code... onResize: function () { this.setState({ winScale: this.props.getWinScale() }); } and in the bootstrapper.min.js file included ... resizing: function (t) { var e = t.touches || [t], n = r(e, 1)[0], i = n.pageX - this.refs.window.offsetLeft - this.resizeOffset.x, o = n.pageY - this.refs.window.offsetTop - this.resizeOffset.y; (i = Math.max(100, i)), (o = Math.max(60, o)), (this.refs.window.style.width = i + "px"), (this.refs.window.style.height = o + "px"); }, Alas are these files default minimized...you can unminify them and figure out where what happens...but as these files are from the core of Storyline adapting them is tricky as they get replaced everytime Storyline updates.
  2. As Jack states indeed the base Gsap version ( 3.6.1 at this moment ) is implemented directly in Articulate Storyline 360 ( Not in Storyline 3, there GSAP is not added by default ) Some plugins are default added too... CSSPlugin, CSSRulePlugin. And offcourse you can add/register any GSAP-plugins you need. I use all of them regularly. Do check my posts on GSAP in the Articulate forum to get more insight on how to use GSAP in Storyline. https://community.articulate.com/users/MathNotermans-96c9568e-8010-446f-af9c-a9ff4765e65a One of the biggest issues and problems in Storyline is scope. Any trigger in Storyline has its own scope, so thats make it extremely tough to work with if you don't know how to. Ofcourse you can solve that by making scripts global and calling functions in it from a trigger. Or by using GSAP's exportRoot() to gather timelines. I make some samples on the Articulate forum to show this properly in Storyline soon.
  3. @ZachSaucier Articulate exists quite some time. Actually since 2002, and Storyline its main authoring tool since 2004. Its an elearning rapid authoring tool provider. For years there were 3 major players on that market globally. Adobe with Captivate, Articulate with Storyline and Trivantis ( eLearning Brothers now ) with Lectora. All three at some point in time shifted from using Flash to HTML5. And all three code their HTML5 not as clean and readable as most developers would like. Articulate has the most closed setup and its tough to discover where is what happening when publishing to HTML in their authoring tool. At some point they introduced Storyline360.. and in its core it had Tweenlite built-in. I guess in proper agreement with Jack. In fact all of its very limited animation possibilities were done by Tweenlite back then. But all hidden for the common user. I tend to dive into the backend of these things and discovered at some point they still used Tweenlite. Whereas GSAP 3 at that moment in time already was available. A bit of ranting on the Elearning Heroes forum ( https://community.articulate.com/discussions/articulate-storyline/storyline360-animation-and-gsap-greensock ) apparently draw attention by Articulate because a few months later i discovered that they had updated to GSAP3 in Articulate360. ( https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360 ) Most users of Articulate Storyline are no coders or scripters. They tend to use the tool as is. But with the use of Javascript and GSAP you can do so much more with it. I do think Articulate could benefit greatly with better cooperation with GSAP developers and create a more intuitive and direct approach on working with GSAP in the Storyline editor.
  4. Indeed Storyline3 doesnot ( yet or maybe never ) supports default GSAP3. Storyline360 does. I work with SL360, so i cannot test with SL3, but i suspect that SL3 supports TweenLite default. You can however indeed add GSAP3 as an external library without any issues and use the newer version. My posts on GSAP on the Elearning Heroes community mostly deal with SL360. But checking older posts when GSAP3 wasnot yet implemented in Storyline you will find solutions on how to add GSAP to Storyline. Either by using a WebObject to add the libraries, or by using the resources in the player... or by manipulating files in your published output or default Articulate folder in Programmes(x64). Here some older posts on GSAP in Storyline. https://community.articulate.com/discussions/articulate-storyline/storyline360-animation-and-gsap-greensock If needed i can mock up a Storyline with an approach i guess will work in SL3... Kind regards, Math
  5. The latest version of GSAP, 3.5.1 is included in Storyline and can be used directly. Not the plugins though, but the core version is included. https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360
  6. I have an issue i can't figure out. So i have draggable elements with 2 classnames.. 'dragObj num1' The 2 classnames 'dragObj' and 'num1' give me the option to treat a bigger set of objects the same... all dragObj and when dropped watch for the complete className...drobObj num1 or whatever and act on that. Issue now is that gsap ( gsap3) doesnot allow me to target the element with its full className... 'dragObj num1' When i target all dragObj... so with just 1 of the classes it works as expected, but then all my objects act.. Any tips ?
  7. Math

    Word Search game

    Not directly indeed 😄, working on getting this to work atm...
  8. Math

    Word Search game

    Hi all, In the codepen you see a Wordsearch game. JS and CSS based. Im trying to make a GSAP version of it, because using GSAP works better in the courses i make. In fact he has a library available of it here... https://lucas-c.github.io/wordfind/ A lot of what i need this library does. Creating solvable puzzles from a set of given words. What i miss ( and focusing on now ) is to make created games playable.. so when clicking a character it should stay highlighted...and thus creating an online game of this. Will share when i got that working... Kind regards, Math
  9. I work mainly in and for elearning companies. Most used rapid elearning authoring tools used are Trivantis Lectora, Articulate Storyline and Adobe Captivate. All 3 deliver HTML5 as endoutput. But all 3 lack in their HTML. And all 3 lack in animation options in it. All have some possibilities, but none compared to GSAP, Spine or Pixi. You can however use Javascript in all 3 to some extent. As im familiar with GSAP, i already made quite some nice enhancements on exercises that were not possible in the elearning authoringtool itself. And allthough i can handle animations quite well in GSAP as is, fellow elearning developers are not as Javascript elaborate, thus i always watch for tools and combos that offer a somewhat easier approach to HTML5 animation. Thus Spine. I have not yet tried to implement Spine directly into my authoring set as Blake suggest. Might give that a try.. Have implemented GSAP and Pixi succesfully in courses, thus expanding animation options... but as said... my fellow developers cant handle it, so always on the watch for combos with UI-based tools. Will mockup some samples soon and add them as Codepen. kind regards, Math
  10. As i just got an email-announcement about an update for Spine 3.7 ( http://esotericsoftware.com/blog/) Quite some nice new features. So i was wondering, would it be possible to combine Spine with GSAP. After some research on the forum i noticed that question was asked before...but i didnot find a solution to combine the two easily. I did remember stumbling on some integration of Spine in a JS-library before. A bit of history search and PixiJS appeared. Apparently Pixi can read and play Spine animations. ( https://pixijs.io/examples/#/spine/pixie.js ) . And GSAP has a PixiPlugin https://greensock.com/?product-plugin=js-pixiplugin Bingo... Anyone has tried this combo before ? Caveats ? Pluses ? Kind regards, Math
  11. Allthough this is quite a late reaction to this thread, after reading all comments i notice one solution missing. Using the 'BodyMovin' plugin with Gsap or Lottie to get any (most) AfterEffects animations straight out. It converts the animations to Json and from that you can build in any tool needed. Doing that at the moment with a combo of AfterEffects, BodyMovin, GSAP to create customizable characteranimations for the web. @JD9 im Dutch too, moving to Valkenswaard soon
  12. Top Diaco. Works perfect both in Chrome as in FF. Thx very much. Working a lot with GSAP ( my favourite tweening library ) in Lectora. Some of the stuff i shared on the Trivantis ( developer of Lectora ) community you find here: http://community.trivantis.com/ Most things i shared there use GSAP. Working on a few new ones ( one of those i encountered this ) now.. Regards, Math
  13. seems to work..in codepen at least... gonna test it in Lectora asap... Thx Diaco...
  14. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math