Shrink and Motion Path...at the same time!

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. 

Hi Graham,
Thanks for sharing. This worked well.
Using this with a shrinking object also required the object to be adjusted on the timeline.
Thanks again!

I'm glad it helped. Thanks for the tip on shrinking. 

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!

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.

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.

Changes:
- 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.

Hi  Philip Deer,

Thanks for those instructions, it worked a treat!

Glad to hear it worked!

Use GSAP and its easy to combine any animation. Check my posts on GSAP.