Jump to content

Math

ShockinglyGreen
  • Content Count

    9
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Math

  • Rank
    Newbie
  1. 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
  2. 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
  3. 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
  4. 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
  5. seems to work..in codepen at least... gonna test it in Lectora asap... Thx Diaco...
  6. 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
  7. 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
  8. 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.
  9. Hi, Actually having a similar problem at the moment with timelines that donot play in Chrome ( 45.0.2454.101)and Firefox (41.0.1) In IE (11.010.240) all plays as supposed too... I probably overlook something simple, because another timeline is playing properly... This is the evil-doer: function changeTextfields(){ var tmpObj; var tlTextfields = new TimelineMax(); for(var i = 0; i < iTextsArr.length;i++){ tfPart2 = iTextsArr.id; //alert("tfPart2: "+tfPart2); tmpObj = eval(tfPart1+tfPart2+tfPart3); tlTextfields.to(tmpObj, 0.5, {rotation:getRandomNum(65,-65)},"-=0.25*i"); tlTextfields.to(tmpObj, 0.5, {rotation:0},"-=0.25*i"); tlTextfields.to(tmpObj, 0.5, {rotation:getRandomNum(65,-65)},"-=0.25*i"); tlTextfields.to(tmpObj, 0.5, {rotation:0},"-=0.25*i"); } } Making all textfields rotate shortly... And this is a similar timeline..that does work in IE, FF and Opera... what do i miss?? function tweenArray(){ var tlChar = new TimelineMax(); for(var i = 0; i < iSpritesArr.length;i++){ tlChar.to(iSpritesArr, 0.75, {autoAlpha:0.45,scale:0.5},"-=0.35*i"); } }