Step 1

Design the slides and other creative elements

Design the creative as per requirements, place the images which will be part of the Advanced Gallery at its intended location.

Step 2

Add Advanced Gallery

Place the Advanced Gallery element at the desired location and apply dimensions as required.

(Advanced Gallery is set to Expand to fill as a default).

Step 3

Add/Remove Elements to/from the Advanced Gallery

Adding images to the Advanced Gallery is as simple as adding elements in the group, simply right-click on the image and select the option of adding an element to the gallery. And to remove an image from the Advanced Gallery, simply select the option of remove from the group, which is exactly the same as removing an element from the group. (All the elements can be added to the advanced gallery; however, we support Images only at the moment).

Step 4

Sequencing the images in Advanced Gallery

The images will be sequenced as they are present in the timeline layers. You can shuffle the position of the layers to rearrange the sequencing of elements.

Step 5

Achieve a variety of transition effects at a click, no need to code!

Select the desired transition option from the properties panel. Currently available options are - Cards, Fade, Cube, and Slide.

Properties

Transition Effect - Set the transition effect to Slide, Fade, Cube, and Cards.
Direction - Gallery could be Horizontal or Vertical.
Auto Animate - Automatically advance images.
Time on Each Frame - Delay between transitions (in seconds). i.e. Time in view for each slide.
Transition Speed - Duration of transition between slides (in ms). i.e. Transition animation duration.
Loop Slides - Select the checkbox to enable continuous looping of images.
Pagination Dots - Option to show/hide pagination dots.
Navigation Arrows - Option to show/hide navigation arrows, along with adjusting the size of the arrows.
Navigation Size - Manage the size of the Navigation Arrows.

Examples:

Cube transition with images and group - https://studio.bonzai.co/canvas/preview.html?previewId=9a5dd161

Cards transition with images and group - https://studio.bonzai.co/canvas/preview.html?previewId=12d3edab&canvas=true

Points to Note:

Advanced Gallery is built to use images only, in the future we will be expanding the scope of the element to accept any other element.
Currently, Advanced Gallery is set to expand to fill, we will include other fill properties gradually.
Timeline animations are not supported in the Advanced Gallery.