Kinetic Gallery

The Kinetic Gallery widget offers a self-contained gallery complete with beautiful full screen animations, a poster style background, hover effects and more.

Gallery images are arranged in a single stylized row and set against a background of large poster-style text. When an image is clicked, a new focus page is revealed with a full size image, tagline, intro, description and button. And best of all, the transition between states displays an immersive spinning animation that is unlike any other gallery.

Consider using this gallery to guide site visitors to a small number of highlighted items such as artwork, photography or vacation destinations.

Preview: https://demo.wocode.com/kinetic-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it in a row or column where you want the gallery to appear.

A NOTE ON CLOSED VS OPENED GALLERY STATES

Throughout this document and within the widget options, the terms “closed” and “open” are often used. These refer to the two different states of the gallery.

Closed refers to the gallery state before an item is clicked.

Open refers to the gallery state after an item has been clicked and the gallery has transitioned into the focus page, or open item page.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use a Unique ID if there will be multiple Kinetic Gallery widgets on the same page.
  • Content Items: This is where you will add each item into the widget. The widget supports up to 10 items. Within each content item, you will find additional options such as the ability to add item thumbnails, main image, and various text content.
  • Background Text Lines: The lines of large poster-style text that appear behind the content is added here.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the images and text within the widget. Most of the design options are related to text styling and are self-explanatory, however, there are a number of specific settings we will highlight.

Widget Styling: This menu allows you to change styling specific to the widget itself, such as applying a background color for the widget or applying a border around the widget’s container.

Background Typography Styling: This menu provides styling options for the text that appears behind the images within the widget.

  • Typography Opacity: Sets the opacity of the text behind the widget.
  • Typography Line Height: Sets the line height (ie: space) between the background text.

Closed Item Styling: This menu provides styling for the text and images when the gallery is in the closed state.

  • Mobile Columns: Sets the number of columns that will be displayed for the closed gallery, when on mobile.
  • Desktop Item Width (%): Sets the width of the content for the desktop layout. If you have content in the widget that is not displaying or is being cut off on the right side of the screen, you will want to use this setting to reduce the content width and allow the cut-off content to be moved into view.
  • Item Step Offset (vh): This setting adjusts the amount of offset each item has. If set to zero, all content will be vertically aligned. When this setting is greater than zero, each item’s vertical alignment will be adjusted to create a step effect.
  • Rounded Corners: Adjusts the radius of the corners for thumbnails in the closed gallery state. This setting can also be used to make circle images if the thumbnail images use 1:1 (square) dimensions.
  • Title Vertical Margin (px): Sets the top/bottom margin on the content title.
  • Caption Vertical Margin (px): Sets the top/bottom margin on the content caption.

Open Item Styling: This menu provides styling for the text and images when the gallery is in the open state.

  • Title Width – Desktop (%): This sets the width of the title on the desktop layout. This can be used (in combination with the open title font size option) to create an overlapping effect where the open title overlaps the open image.
  • Content Width – Desktop (%): This sets how much space the text will take up when the content item is opened. A higher number will make the text wider and the content image smaller; and vice versa.
  • Tagline Vertical Margin (px): Sets the top and bottom margins on the Tagline text.
  • Title Vertical Margin (px): Sets the top and bottom margins on the Title text.
  • Intro Vertical Margin (px): Sets the top and bottom margins on the Intro text.
  • Content Vertical Margin (px): Sets the top and bottom margins on the item content text.