Designer Courses / Getting Started

Animations

In this lesson, we are going to cover animating objects within a Ceros experience. In the above video, we are going to add these animations in a somewhat built out page of an experience however, you can also recreate these steps using your own images or download just the assets to start from scratch. To follow along with our build though, be sure to upload the follow along experience to your studio.

When dealing with animations, it’s extremely helpful to have the live preview link open in another window so you can see how your studio changes affect the actual piece. This way as you apply animations or move objects around your canvas, you can instantaneously see how it looks on the live version.

Animations

Animations

Below we’ve included the various animations we’ve applied to objects in this experience. For more context, be sure to watch the video module above. itle text, and navigate to the animations panel. Across the top, you’ll notice there are two different animation options – one for on-view which is when the object becomes visible, and the other for when the object is hidden. Let’s focus on the on-view trigger for now. As you can in the animations selector, there are a ton of different animations from entry effects, attention

  • Title text:  On view –  Fade In – 1-second delay – .8-second Duration
  • Cloud 1: On view –  Slide Out to the Right – 0-second Delay – 70-second Duration
  • Cloud 2: On view –  Slide Out to the Left – 0-second Delay – 55-second Duration
  • Arrow Icon: On view –  Fade In Down – 1-second Delay – 2-second Duration – Repeat

Helpful Keyboard Shortcut

Ceros has a helpful keyboard shortcut to copy animations from one object and paste to another. To accomplish this, select the animated object you wish to copy, and use the keyboard shortcut Cmd + Opt + C to copy, and Cmd + Opt + V to paste. The keyboard shortcut menu can be accessed in the help section of the Ceros studio or you can view the shortcuts here.

If you have any questions as you’re exploring animations, please reach out to us through the chat and we’ll be happy to help. Be sure to check out our other getting started modules for a deeper dive on other common Ceros elements. Thanks for joining!

Animations