Motion Paths

That is a brilliant demo! 

It looks like it was done with a combination of various entrance animations, exit animations, and motion paths. And some of the transitions that look like shapes changing may be separate shapes.

To get keep an objects movement within a designated area, you have to put the object in a scrolling panel. The panel has to be tall enough so the scroll bar doesn't appear. But that's a great trick, for example, to make the caption-shapes only appear within the phone shape.

I suggest you start small: just recreate the different effects one at a time (rather than trying to recreate the entire sequence). That's a great way to learn about animations and timing. 

Hi Malvika. That really is a cool example!

Judy has made some excellent suggestions. I'll add that we have some helpful Storyline animation tutorial videos in the Articulate 360 Training library that's included in your subscription. For instance, Creating GIF-like Animations in Storyline 360 does a great job of talking about how to make more cinematic animations. And if you're just getting started with these techniques, be sure to give the Animation Basics for Storyline 360 video a watch.

Starting small. 

Hooray for small steps!

Also, if you're looking for even more animation tips, articles and tutorials on PowerPoint animations often have tips that work in Storyline 360 as well. So that's another avenue to explore as you continue playing with making cool animations in your courses.

Hi Malvika!

I remember that example! And yes, I also think it's brilliant. If I recall correctly, Ian achieved the effects using numerous cleverly animated shapes to serve as masks. I've attached an example of the first effect to get you started in the right direction. 

I hope this helps!

Can you recommend any online tutorial on masking in storyline. I am getting animation videos on youtube.

Regards

Malvika

Basically masking is a technique from video and image editing. Creating a second shape to define what part to show/hide of the first shape. In Illustrator thats achieved by compound masks, clipping masks and opacity masks ( https://www.youtube.com/watch?v=45YgKyF6B00 )>
Photoshop has its channels and layer masks to create masks. ( https://www.educba.com/what-is-masking/ )
In webdesign CSS is used to create clipping masks. ( https://css-tricks.com/clipping-masking-css/ ) You can use CSS clip-path in Storyline. Do check some of my samples to get that done.

However the easiest way is the approach by Ian ( and in Mike's sample ). Using the same colour as in your background, elements that have that colour will hide elements behind it. Only mishap of that approach is that you cannot have gradients or images in your background...as that will show. If you need images or gradients in the background, CSS clippath is your only option in Storyline. Here some samples of mine showing how to use 'clippath'.
https://community.articulate.com/discussions/articulate-storyline/changing-state-directly-from-javascript?page=2

Kind regards,
Math