How Do I Add Animations to My Experience?

2 Minute read

Reading Time: 2 minute

Adding animations to an Experience is one of the easiest ways to make your content come to life. But choosing the right animation can be a bit of an art. Which is why we have an extensive list of entry, exit, and attention seeking animations for you to choose from.

To add an animation, simply select the object you want to animate, navigate to the Animate tab in the inspector panel, select whether that animation will be On View or On Hide, select the animation action, 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! If you would like to add this experience to your Studio, click here.

Was this helpful?

2 2
2 out of 4 people found this helpful