Motion

Potion Pack addon stack

Gorgeous, animated slideshow backgrounds are easy to achieve using the Motion stack. Includes Ken Burns effects, overlays and more.

  • Use as an independent slideshow or create a banner slideshow background
  • Vertically center content within the Motion stack
  • Set different heights for each breakpoint, including Full browser height, Flexible or Fixed heights
  • Randomize slide order
  • Apply a slideshow to the entire site background
  • Choose from many different slideshow animations including the Ken Burns effect
  • Include an overlay on top of the slideshow images
  • Use drag-and-drop or remote based images for background slides

Example

The example below is a simple slideshow background with a small bit of content placed inside of it. We’ve enabled one of the overlays to give us a bit of contrast with the light colored text we’ve used. This example uses the Ken Burns effect along with a fade transition. Another example of Motion can be seen on this live preview site, along with samples of other Potion Pack stacks.

Using Motion

General

Dark Mode
When enabled you'll be given additional options throughout the Motion stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

Sample Image for Edit Mode
This allows you to select one of your slideshow’s images, usually the first one in the group, so you can see in Edit Mode how your content and adjustments to settings will be displayed.

Apply To Site Background
This unique feature will take your slideshow and apply it to the background of your site. Any content you have placed within the Motion stack’s content area will be ignored when using this feature.

Vertically Center Content
You can choose whether you’d like Motion to vertically center your content within the slideshow.

Inner Container
You can choose between a fixed-width for the inner portion of the Motion stack or make it Fluid. The Fluid setting allows the contents of the stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your content in the Motion stack when using Fixed-Width as your inner container type.

Include Progress Bar
You may opt to include a progress bar at the bottom of the Motion stack. This progress bar shows how long it will be before the slideshow transitions to the next slide. When enabled you can set the colors for the progress bar, as well as the progress bar’s height.

Randomize Slides
Enabling this feature will randomize the order that your slides are shown in. The more slides in your slideshow, the more random it will feel.

Animation

Transition Length
The amount of time it takes for the slideshow to transition from one slide to the next.

Pause Length
This is the amount of time that each slide will be displayed.

Transition
You can choose a transition animation style that suits your site, or if you’re adventurous you can opt to randomize them!

Ken Burns Effect
Enabling this feature will give your slideshow a nice pan and zoom effect. You can choose from a few different pan and zoom effects, or, again, if you’re adventurous you can randomize these as well.

Overlay

Overlay Style
We’ve included 15 different overlays for you to choose from. These can be used to add a unifying style to your slides or to help your content stand out from the background slideshow.

Height

You can choose to set the height of the Motion stack at each of the three breakpoints. Each breakpoint can have its own height style (Flexible, Fixed or Full).

Flexible
The Flexible height setting matches the height of the Motion stack to the height of the content you place within it. This setting works really well in conjunction with placing a Margin stack within the content area of your slideshow to set different spacing at each of the three breakpoints.

Fixed
The Fixed height setting will lock the Motion stack’s height to a specific height while at that specific breakpoint. It will not change its height until it hits a different breakpoint.

Full
This setting is much like the Hero mode for the Banner stack. It will force the Motion stack to be 100% of the height of the visitor’s browser. Great for making beautiful, full-page-sized slideshow banners!

Advanced

Collapse Content in Edit Mode
To make a bit more space when working within Edit Mode you can choose to collapse the Content section of the Motion stack. This frees up a lot of space, but leaves the Slides displayed so you can see what the stack is at a glance and reference the images you’re using in the slideshow without opening up the Content section of the stack.

Child Stack

Image

The child stack for Motion is where you will add each individual slide in your slideshow.

Image Type
You can choose to use the standard drag-and-drop image zone for your individual images, or opt to use a remote URL from an image on your server.

Image
If your Image Type is set to Drag-and-Drop you will be presented with an image well to place your image inside of here. If you're using the Remote Image setting you'll be given a link picker that allows you to set a URL pointing to an image on your own server.

Custom Transition
You can customize a slide to have its own transition style that is different from that of the main stack’s transition style.