Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About Math

Recent Profile Visitors

2,455 profile views

Math's Achievements

  1. @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.
  2. 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
  3. 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
  4. 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 ?
  5. Math

    Word Search game

    Not directly indeed 😄, working on getting this to work atm...
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. seems to work..in codepen at least... gonna test it in Lectora asap... Thx Diaco...
  12. 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
  13. Hi Carl, i know. Problem though is that in this case it is a Lectora based project and since Lectora generates html and css i am not sure if i can recreate the situation with a codepen. And even if i could, the issue might be unexisting in a standalone codepen... or a solution working might not work when combining it in Lectora. But well we wont know if i dont use a codepen to recreate something like it at least...so gonna give it a try Thx in advance, Math
  14. Guess it has to do with difference in type of elements... chars are images..and thus all works in all browsers the same.. The textfields apparently have issues with some properties of the tweens. I tried this: tlTextfields.to(tmpObj, 0.75, {autoAlpha:0.45,scale:0.5},"-=0.35*i"); //tlTextfields.to(tmpObj, 0.5, {rotation:35}); rotation and scale dont work on the textfields...so i suppose i need to use css transformations to get those working crossbrowser. autoAlpha works... the others not.