Skip to content

Backdrops and animations

Dim the page behind an item so it stands out, and choose how the item appears.

Who can do this: All Flook users

Add a backdrop

  1. In the Flook Builder, open the item.
  2. On the Essentials tab, turn on Backdrop.
  3. Optional: change the Color, or click Reset to Theme.
  4. For tooltips, highlights and tooltip steps, you can also turn on Showcase element. This cuts the selected element out of the backdrop so it stays bright and clickable.
    • Padding sets how much space is left around the element (the default is 10 pixels).
    • Rounded gives the cut-out rounded corners. You can set each corner separately.
  5. Click Save.

Choose an animation

  1. Open the item and go to the Advanced tab.
  2. Under Animation, choose a Type: None, Fade, Scale, Perspective, Shift away or Shift toward. Popups can also use Slide in and Bounce.
  3. Click Preview to see it.
  4. Click Save.

For tours, the animation is set in Tour general settings.

Tips

  • With a backdrop, visitors can't click the rest of the page until they close the item. For highlights and popups, clicking the backdrop closes the item.
  • Popups in the centre of the screen can't use every animation: "Center placement does not support all animation styles".
  • Popups at the edge of the screen with Slide in slide in from outside the screen.
  • You can set the default backdrop colour in your theme.