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

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.

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. 

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. 

I used a tool called Knowledge Presenter that had this built in, would love to see it in SL360 too!
https://community.articulate.com/discussions/articulate-storyline/smooth-object-transformation-using-start-end-properties

I would like to see this added. Oddly, we have to hack this type of animation.  I'd love to add keyframe animation similar to what can be done with graphics in Adobe Premiere.

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

I think that a feature request could prove helpful, if it were like the "morph" feature in PowerPoint.

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.

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.

I actually dont see that happening Angie. The 'accountability' image nicely stays in position. Both when republishing your file..and in Review...