Animations in the Designer

Most elements in a design can move on the screen. A heading can slide in, a price can pulse gently and a photo can float. You set this up per element in the Designer, and your screens play it automatically.

Make an element move

  1. Open your design in the Designer and select the element.
  2. Click Animate in the bar above the canvas. If the window is narrow, you will find it under the three-dot button at the end of that bar.
  3. Choose an animation under Entrance, under Continuous, or under both.

To remove an animation, set it back to None.

Entrance

An entrance animation plays when the design appears on the screen. You can choose from:

  • Fade in
  • Slide from left or Slide from right
  • Slide up or Slide down
  • Zoom in
  • Bounce in

Set how long it takes and how long it waits before it starts. Give each element a slightly longer wait than the one before, for example first the heading and then the prices, and your design builds up step by step.

Continuous

A continuous animation keeps going for as long as the design is on the screen. You can choose from:

  • Pulse: the element grows and shrinks a little.
  • Rotate: the element turns around.
  • Bounce: the element hops up and down.
  • Float: the element drifts slowly up and down.

With the speed and intensity sliders you choose how fast and how strong the movement is. An element can have an entrance and a continuous animation together: the continuous animation starts once the entrance is done.

Preview your animations

Click the Preview button in the top bar of the Designer, just before the Download button, to see the design move. If your design only has entrance animations, the preview closes by itself when they are done.

On your screens

  • In a playlist, the entrance plays each time the design comes into view.
  • When the design is the only thing on a screen, the entrance plays once when it loads, and the continuous animations keep going.

Good to know

  • Apps, playlists and QR codes inside a design cannot be animated.
  • Text that scrolls across the screen is not an animation. Add the Ticker app to your design instead, from the Apps panel in the menu on the left of the Designer. See Info apps: weather, clock, news, tickers, and more.
  • The AI Assistant can set animations for you while your design is open in the Designer. Ask, for example, "let the prices pulse" or "let the heading slide in".

Tip

Movement draws the eye. Animate one or two elements, such as the offer of the day, and keep the rest still. That way the screen stays calm and easy to read from a distance.

See also Create a design in the Designer.

© screenbird.app