Kinetic

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Kinetic includes a fallback color that resides behind the slideshow. This is there to be shown in the event a very large image file in the slideshow takes a while to load. This setting allows that fallback color to be seen in Edit Mode as the Kinetic backdrop to help with editing content.

When you're not actively working on individual slides you can enable this feature to hide them in Edit Mode, freeing up a good deal of space.

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

This setting allows you to pick a solid color to be shown in the event a very large image file in the slideshow takes a while to load. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the fallback color.

Controls the length that each slide will be displayed. Also affects in turn affects the speed of the Ken Burns like animation as well. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after. This setting is applied to the Ken Burns like transistion animation.

This setting determines the direction the Ken Burns like effect will travel. The most natural look is usually achieved using the Random setting, which is enabled by default.

Here you specific the start and end values for the scale of the background images. Having different scales here helps accentuate the Ken Burns like effect. By default we zoom out, going from a larger value to a smaller one. The minimum value is 1.15x as to ensure that the entirety of the Kinetic background area is completely covered throughout the animation.

When enabled a spinning loading indicator will be added to the background slider. The indicator remains visible until the first slide in the background slideshow loads completely.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the loading indicator's color.

Here you can choose the type of overlay you'd like to include in your Kinetic background slideshow. The overlay resides between the background slideshow and the content resides on top of the slideshow. This often helps with legibility when it comes to the content that sits upon the slideshow.

Depending on the Mode you choose above you'll be provided color pickers for styling the overlay, whether that be a solid color or a gradient. In the color pickers you can also adjust the opacity of the overlay color.

Kinetic allows you to set the height of the background slideshow in two ways — Fluid or Responsive. Fluid adjusts its height to that of the content you insert inside the tool. This is the default and recommended method. Responsive mode allows you to supply a different height value at each inidividual responsive breakpoint.

When choosing Responsive mode you'll be given 6 fields where you can specify the height of the background slideshow for each breakpoint. Additionally you can choose the unit of measure for these responsive height measurements.

This feature allows you to make use of CSS Grid's vertical alignment options within the content area of Kinetic. It is only used when the Height mode is set to Responsive.

Enable this setting to add a small progress bar to the bottom left corner of the background slideshow. This shows the progress for each individual slide from the start of its duration value to the end when it switches to the next slide image.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the progress bar's color.

Here you can use a color picker to adjust the bar background — the area the progress bar resides inside of — to help it stand out on your background slideshow.

Allows you to adjust the width of the Progress Bar at each of the 6 responsive breakpoints, giving you control over its overall footprint. This is measured in percentage (%) — based on the width of the Kinetic background slideshow at any given time.

This setting allows you to adjust the height, or thickness, of the Progress Bar. The height here is measured in pixels (px).

Sets the roundness of the Kinetic background slideshow's corners. Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Used to add a decorative shadow to this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.