Skip to main content

Flip

Written by Bonzai
Updated today

An interactive card-based element that flips on interaction / on-scroll to reveal secondary content on the reverse side, enhancing engagement and layered storytelling.

Tutorial Video:

Assets Required: (same dimension required)

  • Front image(Support Multiple Layers/Elements)(JPG/PNG/WebP)

  • After Image(JPG/PNG/WebP)

  • Optional text layers.

Steps

  1. Design the slides and other creative elements

  2. Add Advanced Gallery

  3. Add/Remove Elements to/from the Advanced Gallery

  4. Sequencing the images in Advanced Gallery

  5. Select the desired transition option from the properties panel. - Flip.

Properties

  1. Transition Effect: Choose how slides transition - Slide, Fade, Cube, Cards, or Flip.

  2. Direction: Set the transition to horizontal or vertical.

  3. Auto Animate: Enable to automatically cycle through slides.

  4. Time on Each Frame: Set how long each slide stays visible (in seconds).

  5. Transition Speed: Control the duration of the transition animation (in milliseconds).

  6. Loop Slides: Enable continuous looping of slides.

  7. Pagination Dots: Show or hide slide indicator dots.

  8. Navigation Arrows: Show or hide arrows for manual navigation, with adjustable sizing.

  9. Navigation Size: Adjust the size of the navigation arrows.

Inspirations:

  1. Whittakers

  2. Flight Centre

Points to Note:

  1. 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.

  2. Currently, Advanced Gallery is set to expand to fill, we will include other fill properties gradually.

  3. Timeline animations are not supported in the Advanced Gallery.

FAQs

  1. Where can I find the Flip feature?
    The Flip transition is available under the Advanced Gallery section, alongside transitions like Cards and Cube.
    ​

  2. What image formats are supported in the Flip feature?
    JPG, PNG, and GIF formats are supported.
    ​

  3. Does the Flip feature support video files?
    Yes, video files are supported in the Flip feature.
    ​

  4. Can we flip vertically?
    Yes, vertical flip is supported.
    ​

  5. How many elements are required for the Before & After states?
    Two elements are required either two images or two groups containing multiple elements.
    ​

  6. Can we add an on-scroll flip animation?
    Yes, this is possible for banners by adding an event to a scroll-based timeline.

Did this answer your question?