Animation: I want to move and simultaneously shrink the size of object in Storyline 3

Sep 26, 2019

Hi All, 

I need help regarding Animation in storyline 3. I want to diagonally move the object ( which can be achieved by motion paths ) and simultaneously shrink it to almost 20% of its size. Not sure how both can be done together. Can anyone help ? 

TIA

20 Replies
John Morris

I used two pictures.  The first moves on a motion path and then shrinks on exit.  The second picture, which is smaller, has an initial state of hidden and becomes visible when a cue point is reached.  I then adjusted the cue point until the two events appear seamless.

See attachment.

Leandro Sartori

Hello Tia,

I don't think it's possible to shrink it simultaneously, only after the path is done. (I might be wrong)

Depending of what you are doing you can maybe use the stats and change the size of the object "manually" according to the timeline. It's a kind of "hack" but worked for me in the past. 

Michael Oppenheimer

Dev,

I use a slightly different technique than John. I have an object with multiple states.  Each state is slightly different than the previous.  I create a motion path for the object.  Then a number of triggers that change the state of the object at specific time.  The shrinking is not smooth unless there are a large number of steps and triggers. 

See attachment as a simple example. 

Math Notermans

An option would be to use GSAP. As its build into Storyline its as easy as selecting your image and then triggering the javascript animation...

Like this...

animateElement("cat");

function animateElement(_accName){
var element2Animate = document.querySelector("[data-acc-text='"+_accName+"']");gsap.to(element2Animate, {x: "30vw", y: "60vh", duration: 2 ,scale:0.65});

}

Sample added

Angie Elliott

I agree - this is amazing! Thank you, Math! But I do have a follow up tip for anyone who looks at the JavaScript code and scratches their head like I did.

I noticed that the JavaScript code is referring to an element named "cat" but that is not the how the image is titled in Math's sample Storyline file, so I wasn't sure where that was renamed. It's in the Media Library in the Alt Text field.

Angie Elliott

Something else I ran across when QA'ing my course that has this functionality in it was when I toggle the sidebar menu open or closed, it resets my image back to the same state it was at prior to moving and shrinking. The location of the image also shifts enough that it cuts a small part of it off. Any ideas of what I can do to keep this from happening?

Here is the Articulate Review link: https://360.articulate.com/review/content/ce52e6ea-6b97-4633-896b-ac7e2533b68b/review

I have also attached a portion of my Storyline file for anyone who wants to dig in.

Math Notermans

My fault... forgetting about the 'acc-names'. Easiest way to select elements in Storyline is using the accessibility names. That's so second nature for me that i forget about that.

Yeah the player has quite some effect on your position in Storyline. I mostly dont use the player at all...so use it transparant and build my own controls. 

One that might do the trick is use a background image in Storyline to which you calculate values. Default Storyline elements will scale and position properly always as they are calculated by Storyline whenever you open up the player. So keeping eg. your 'abstract illustration.jpg' as reference instead of 'vw' will for sure make your elements stay properly inscreen.

If i have time i will see if i can find a trick for that.

Terry Bell

I'm seeing the same thing as you Angie, if I open the transcript, the image pops back out to its original size and position. Also, if I click on the timeline to get back to a point before the animation, the image just jumps to its new location and size.

I had the same results in chrome, firefox, and edge.

Math Notermans

Now im really intrigued...
Ah yes... it is not the Menu or Hamburger Menu triggering this... its the Comments on Review.

So basically this is a Review issue and thus impossible to fix ( and unneccessary as on your LMS this won't happen ). As for some projects/clients i keep an older version of Storyline 360 installed ( version of june ) i now updated to the latest version just to check whether this behaviour happens in Storyline when previewing / publishing as Web and for LMS. And it doesnot...so works just fine. Thus indeed a specific bug in  Review when having Comments open... Somehow skipping back into time ;-) Just keep your Comments hidden...and it works as expected...

Math Notermans

I guess the 'vw' in the code...is the complete viewport including the Comments part. And thus somewhere in Review it goes wrong. As you see when the Comments part is hidden, the image is slightly more to the right and cuts off part of the text. However not scaling back up to 100% and its original position as when you have the Comments window open.

Gonna do some tests to see whether i can detect if the Comments are open or closed.

Math Notermans

Well changing position value in the code to percentage or pixels doesnot make a difference on Review. Keeps resetting the image. Really is some weird Review behaviour. Might have to do with the fact that the action is triggered by a cuepoint... testing that.

That wasnot the case... so out of ideas now. Somehow Review triggers a reset somewhere.