Forum Discussion
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 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/
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
