Adding animations to an experience is one of the easiest ways to make your content come to life. Choosing the right animation, on the other hand, can be a bit of an art, which is why we have an extensive list of entry, exit, and attention-seeking animations to enhance your designs with.
To add an animation to an object, simply select the object you want to animate and navigate to the Animate tab in the inspector panel. From there, select whether that animation will be On View or On Hide, select the animation action (fade in, etc.), the direction that you want the animation to play in, and set the ease, delay, and duration.
Note: You can apply up to three different animations to the same object.
Definitions
- On View: This will trigger the animation when the folder or object comes into view.
- On Hide: This animation will only fire when that folder or object is hidden.
- Direction: This will dictate what direction the animation completes in. For example, if you’re applying a Slide In animation, you can designate if that’s sliding in from the Left, Right, Top, or on a Diagonal.
- Delay Optional: Animations will only be triggered when the object is visible on the screen. By applying a delay, you are saying, when the object is on screen, delay animation by x seconds. A delay of 0 will automatically trigger the animation.
- Duration: The length of time, in seconds, the animation will take to complete. Durations can be as little as .1 and have no upwards limit.
- Repeat: After the animation completes, you can choose to repeat the entire animation (delay and duration) again. This is great for attention-seeking animations.
- Add Another Animation Optional: This allows you to add an additional animation to play after the previous animation. You can add up to three separate animations to the same object.
- Repeat Entire Animation Sequence Optional: This selection allows you to repeat the combination of 2 or 3 different animations in sequence.
- Replay When Scrolled Onto Screen Optional: This selection allows the animation(s) to be triggered again if it is scrolled off of the screen.
Below is an experience with a preview of many animations available in the studio. Just remember, you can create a ton of customized effects by combining two or three animations in sequence!