Shrink and Motion the same time!

Jan 12, 2015

I'm trying to get this picture of dice to move from center stage to the upper corner of the projection screen, where it'll sit as an icon and just chill until the end of the slide.  I'd also like it to shrink down to size at the same time.  However, when I program the motion path and the "shrink" animation to begin at the same time and last the same amount of time, it freaks out on me.  What am I doing wrong?  I couldn't find any tutorials about this.

29 Replies
Jerson  Campos

Storyline runs animation after the motion paths. The reason it may be freaking out on you is because you have the time overlapping for both of them. If the item  on for three seconds long and you have the motion path running for 2 seconds, and the shrink animation for 2 seconds, you have 1 sec where the animation overlaps and this is where Storyline will freak out.  You can't have both animations running at the same time.

StatEase Admin

I wasn't able to get the effect I wanted, but here's what I used as a workaround:

1. Create two copies of your object, one to shrink and one to move.   Make the move one the size you want when the object is done shrinking, arrange it so it's on top of the shrink object, and give it an opaque background.

2. Align the two objects so that they have the same center, then move them where you want the object while it shrinks.

3. Time the move object to appear exactly when the shrink object gets to be that size.

4. Move the object.

I've attached the finished interaction.  The first object appears at 5 seconds, then shrinks and moves at 11.5 seconds.  I hope this helps, and I hope the next version of Storyline has a "shrink to a specific size" and "while you move" feature.

Philip Deer

How can we add a simultaneous motion path and animation as a feature request, please?

Trying to make this happen with workarounds, whilee, is quite a time consuming especially if the items aren't nicely shaped objects. Try doing that with a skeleton. I got it to work and it took me a couple of hours for something that should have taken a few minutes at most.

Thanks in advance!


Graham Matheson

I have had a bit of luck with this problem. I needed an object to grow and move at the same time. It was a popup window with information pertaining to a specific section of the screen. Would work with shrinking too.

Build the shape/image. If there are multiple components, copy them into the normal state of one of the components or a shape (as opposed to grouping them). Then apply the grow or shrink animation to this shape.

Now I added a transparent shape around my original image. I then grouped my image with the new transparent shape. You need something to group with, it doesn't matter what. I chose a transparent shape so it wouldn't change the look of the image.

Apply the motion to the group. SL will apply the motion path on the group and the animation on the shape simultaneously. I found it looked better if the zoom was 0.25 seconds longer than the motion path. I found this easier and smoother than using states to change the size of the object. 

Kelly Sheehan

Hi Graham Matheson,

I am trying to implement your method for a shrink and move of an object and it isn't working. I am on Storyline 3 and I have created an object and assigned it with the shrink animation with a duration of 0.75sec. I have then created a transparent object around this that has no animations. I have then grouped these 2 object together.

I then assigned the motion path to the group and it has a duration of 2 secs. But when I preview this it only moves the object is not shrunk. Please help!

Kelly Sheehan

Hi Wendy,

I have put a basic example as an attachement. So what I want to happen is for the green box to move and shrink to nothing when it reaches the information button.  I then want to be able to grow the green box again when I click the information button.

I have just setup the shrink for now as I assume if this can be made to work I would just change the animation to grow and the move would trigger on clicking the button.

Wendy Farmer

Hi Kelly

I changed the trigger for the motion path to when timeline starts on the slide (not the group) and added a trigger to change the state of the green box to hidden when the animation (motion path) completes.  Not sure how you will get it to grow again when they click the button - I would probably be using another object for that...see example.

I'm not sure why you have the rectangle in a group - I've done the example with just the rectangle and added a second rectangle for the grow animation but I may be way off what you are trying to do.

Philip Deer

Hi Kelly,

The issue here is that SHRINK is an exit animation, so the timing of when that animation occurs is off. You have to take into account:

- the duration the animated object is on screen (timeline) - this affects when the animation starts
- the duration of the object's animation
- when the motion path begins and ends
- the duration of the motion path

I have made some adjustments to give you an example and attached it here.

- adjusted the object timeline to end at 2.5 seconds
- set the object's exit animation for 2 seconds

Then I followed the remaining steps:
- grouped the object with the transparent object
- added a 2 second motion path to the group

You can play around to get the right timing for the effect and for the duration you want it to be on screen.

In order to grow the green box again, you might have a couple of options. Here are my thoughts.
-A. You might consider an additional layer that doesn't have the shrink and motion path on it. Then add the needed objects and animations that are triggered by clicking the Information button.
-B. You might be able to make another object that is in a Hidden State until you click the Information button. Then when you click the button have the hidden object set to become a different state that is no longer hidden and has a grow animation.

You'll have to play around and see what works. Good luck and let me know if I can be of help.