Creating sequential animations

Animations are a key component in adding life and interactivity to your project. In this article we are going to demonstrate a technique for creating sequential animations in Storied.

1. Select the object you want to animate, navigate to the  Actions (lightning icon) in the tool bar on the right hand side.
2. Select your  Event and Target ( in our example we will use Event - Page visible and our Target is the element that we want to animate).
3. Select  Action - Animation Effects or Text Animation Effects.
4. In order to animate in sequence use  Optional - Delay setting. The best practice is to use 500 - 1000 ms delay between animated elements.

For this example, we will have four separate items that need to be animated sequentially:
To achieve this, our first animated object will have 0ms delay (meaning it begins immediately);
The second animation will have a 500ms delay (meaning it begins in half a second);
The third animation will have a 1000ms delay (meaning it begins in one second);
and so on until all animations have been successfully sequenced.