Gorgeous, animated slideshow backgrounds are easy to achieve using the Motion stack. Includes Ken Burns effects, overlays and more.
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.
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.
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.
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.
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.
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.
The amount of time it takes for the slideshow to transition from one slide to the next.
This is the amount of time that each slide will be displayed.
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.
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.
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).
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.
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.
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!
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.
The child stack for Motion is where you will add each individual slide in your slideshow.
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.
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.
You can customize a slide to have its own transition style that is different from that of the main stack’s transition style.