Animation in Storyline through the Morph Transition

Nov 12, 2018

Cameron Ward
By Cameron Ward

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 one slide, duplicate the slide, and make changes to the shapes on the second slide, the Morph transition will smoothly deform the shapes from the first slide to the next.

This transition is POWERFUL for animation. I feel that small animations of this kind are especially important for a product like Storyline. In a sense, the ability to build animations is one of the key features that I feel is missing from Storyline. If Articulate would consider adding the Morph transition to Storyline, it would allow users to animate the graphics on the screen with triggers, and I believe that would open up new worlds of possibility with Storyline.

Is this something you all would consider adding to Storyline?

242 Replies
Paul Tottle
over 2 years ago05/18/21 at 10:21 pm (UTC)

I've tried to use PowerPoint morph and integrate into my current Rise and Storyline project with limited success. So far I've not been able to get the screenshot video to display in Rise so it's not blurry. PowerPoint doesn't have a pixel sizing of slides. But it does export 720px video, so I'll try this. Plus, matching locations of storyline objects with those on the video is imperfect. So far I'm just using a simple mouse over of video elements in Storyline and embedded in Rise.

Even with the blurriness of the morph effect, its worth keeping in the project. The morph tells a story better, implying fluidity and transformation.

Also with powerpoint I can use the 'any time' animation effects. In storyline, animations only work for the start and end of an object appearance, then I need to use workarounds.

Morph in storyline would be such an asset.

Bill King
over 2 years ago06/22/21 at 2:30 pm (UTC)

Just would like to add one more voice to the growing chorus. For me (and I'm pretty clearly far from alone), enabling morph in SL would be a sea, not an incremental, change IMO. FYI, I received the following feedback last year after making heavy use of PPT morph transitions for the first time for senior mgrs of a Fortune 50 brand -- they are POWERFUL! 

Math Notermans
over 2 years ago07/09/21 at 4:41 am (UTC)

As a lot of assets in Storyline are SVG, and with GSAP's plugin MorphSVG you can create morphs directly in Storyline... it should be easy for Articulate developers to implement that.

https://greensock.com/morphsvg/
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review

And just discovered an interesting open source JS-library that gives you the same options as MorphSVG. 
https://github.com/veltman/flubber

Phil Mayor
over 2 years ago07/09/21 at 7:43 am (UTC)

IT would be a lot of work using javascript to achieve what PPT does with the morph animation.

The morph can be applied to a series of slides whereby PPT tracks what the objects are (and even how they were created such as duplicated, or created new) and then selects morphs for those series of slides. 

If morph gets implemented I would like it to implement that ability rather than just morphing two elements.

Math Notermans
over 2 years ago07/09/21 at 8:02 am (UTC)

As i do find this topic intruiging quickly searched for Javascript libraries that might help do the trick.
And although its tough to get working over multiple slides ( scope issues in Storyline ), this Javascript library seems to make morphing of position and scale of pageelements easy.
https://github.com/Rich-Harris/ramjet
Not said this is a solution that works like Powerpoint Morph...as it is not ( yet ). But it might be a step in the right direction...

Andy Pastotnik
over 2 years ago07/09/21 at 12:44 pm (UTC)

I'm happy to see all the chatter about the need for Morphing....I thought this thread was going to die on us. 

1. The ability to do Morph is truly needed. 

2. The ability to use "Key-Framing" would ALSO be a great win!

 

To have the ability to have a smoother transition in our work would be a GREAT WIN!

Patrick Mannion
over 2 years ago07/09/21 at 7:24 pm (UTC)

The original point of y feature request (which is now years old) wasn’t really about the need to DO certain types of animation in Storyline, but rather to preserve the animation that already exists in my PowerPoint slides through the Morph transition. I’m able to use the Morph to very quickly and easily animate certain things in a certain way in PowerPoint. I just want to see Storyline preserve the work I have already done. Why make things hard when you can make them easy?

If you’re reading and have not made use of the Morph transition in PowerPoint to quickly animate things, you’re really missing out. Especially if you’re using the animation tab to spend more time doing the same things.

This message and any attachments are Confidential Information, for the exclusive use of the addressee and may be legally privileged. Any receipt by anyone other than the intended addressee does not constitute a loss of the confidential or privileged nature of the communication. Any other distribution, use or reproduction is unauthorized and prohibited. If you are not the intended recipient, please contact the sender by return electronic mail and delete all copies of this communication

Jean-Christophe Goyette
over 2 years ago07/13/21 at 12:32 pm (UTC)

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.

Math Notermans
over 2 years ago07/14/21 at 5:38 am (UTC)

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/

David Trainer
over 2 years ago07/22/21 at 5:59 am (UTC)

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

Drew Kunkel
over 2 years ago08/02/21 at 12:33 am (UTC)

I would like to add my vote to request morphing (or at least a gradual resizing). If I remember right, it's even older than it's implementation in PowerPoint. I used to use Apple's Keynote a lot and used morphing animations there. When I needed to transition to PowerPoint, I was quite frustrated that it wasn't there.  Now, I'm just starting to use Storyline and am frustrated once again. My point is, it's been around a long time, and I'd really like it added to Storyline.

Sign In to Reply