Studio Two Editor: Adding and Customizing an Animation

• Direction: Set the direction the animation comes from.
  Tip: Depending on the animation type, set the direction in degrees (e.g. 180°) or choose an option from the dropdown (e.g. from left, from center).

• Duration (secs): Change how long the animation lasts.

• Delay (secs): : Set how long to wait after the page loads before the animation starts.

• Scale: Set how much the element grows or shrinks during the animation.

• Fold angle: Set how far the element folds, in degrees.

• Blur intensity: Set how blurry the element looks during the animation.

• Number of parts: Set how many pieces the element splits into for the animation.

• Stagger the animation: Apply a small delay between each item’s movement so they animate in sequence rather than all at once.

• Easing: Set how gradually the animation eases in, out, or both.

• Direction: Set which direction the animation moves.

• Distance (px): Set how far the element moves.

• Duration (secs): Set how long each loop takes to play.

• Delay between loops (secs): Set the pause between repeats.

• Easing: Set how the animation speeds up or slows down.

• Intensity: Set how strong the poke effect is.

• Angle: Set how far the element folds, in degrees.

• Choose which part of the animation you want to customize:

  • In: How the animation looks when the element scrolls into view.

  • Out: How the animation looks when the element scrolls out of view.

• Animation area: Set the scroll range where the animation starts and ends.

• Direction: Set which direction the animation moves.

• Spin direction: Set which direction the element spins.

• Scale: Set how much the element grows or shrinks.

• Starting opacity: Set how transparent the element is before it fades in.

• Skew: Set the angle the element tilts as it animates.

• Speed: Set whether the element grows or shrinks faster or slower.

• Rotate: Set how many times the element spins in 3D as it animates.

• Blur: Set the intensity of the blur.

Tip: Click Add In / Out Animation at the bottom of the panel to set up the second part of the animation separately, or reuse the same animation for both.

1. Select the element in your editor.

2. Click the Open Inspector icon  at the top right of the editor.
   

3. (If not already open) Click the Motion tab.

4. Click the relevant animation type.

5. Click None in the panel.

Different animations are supported on different elements; so the available effects depend on the element you're designing.

Entrance, Loop, and Scroll are animation types you can add to elements. However, you can also add click or hover interactions, as well as mouse effects. Learn more about the different types of motion and effects.