Forum Discussion

CameronWard's avatar
CameronWard
Community Member
7 years ago
Solved

Animation in Storyline through the Morph Transition

Some time ago, PowerPoint came out with a transition called Morph that literally morphs shapes, colors, strokes, graphics, etc. from one slide to the next. In other words, if you build a design on o...
storyline 360
  • EricSantos's avatar
    EricSantos
    6 months ago

    Hello everyone, 🎉

    I have some great news to share! We just released another update for Storyline 360. In Update 98, we’ve included essential fixes and new features. One of the new features we’ve included is:

    • Engage learners with fluid transitions that seamlessly animate objects, shapes, and other content between slides.

     

    Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You’ll find our step-by-step instructions here.

    Please don’t hesitate to reach out if you have additional questions.

Jean-Christo203's avatar
Jean-Christo203
Community Member
5 years ago

I'll add to the discussion:

  • There is no Trigger to "Move [this object] to [this position (X, Y)]".
  • There is no Trigger to "Rotate [this object] to [this degree] / by [these degrees]".
  • There is no Trigger to "Scale [this object] by [this percentage] / to [width / length]".
  • There is no Trigger to "Change the opacity of [this asset] to [this percentage]".

As much as people would like a Morph animation, there are also basic omittions.

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

Storyline 360 has default GSAP3 loaded. So all the things you want you can do easily.

Moving an element:
var pageElement = document.querySelector("[data-acc-text='someImage.png']");
gsap.to(pageElement, {duration:2,x:"+=100",y:"+=100"});

Rotating an element
var pageElement = document.querySelector("[data-acc-text='someImage.png']");
gsap.to(pageElement, {duration:2,rotation:45});

Scaling:
var pageElement = document.querySelector("[data-acc-text='someImage.png']");
gsap.to(pageElement, {duration:2,scale:1.65});

Opacity:
var pageElement = document.querySelector("[data-acc-text='someImage.png']");
gsap.to(pageElement, {duration:0.5,autoAlpha: 0.65});

And using GSAP timelines and sequencing you can do amazing stuff.
https://greensock.com/gsap/

  • DTrain's avatar
    DTrain
    Community Member
    5 years ago

    Math, great response I look forward to playing with.
    For content-focussed ID's we would want this integrated into the design and publishing tool in a WYSIWYG preview standard that people are now familiar with from other tools.

    For the OP, to import PPT to SL360 and retain morph, taking a work around following from Tom "Rapid E-Learning" Kuhlman patterns of using Powerpoint for rapid development:
    - you could use video recordings of the morph transitions
    - put into the timeline with the static imported non-morphed slides to port it to SL360
    - while retaining the maintainable source for the transitions in the PPT.

    I'm keen to do a duplicate task with the GSAP option above, timed against equivalent with PPT as video into SL360. I will test that out at next opportunity it arises, likely tomorrow =D