QuickFlip 4

Flipping Cool Stack

QuickFlip allows you to flip content over to reveal more. Version 4 now allows you to even have more than two sides. It is magic! The flip animations use the most advanced animations out there to ensure smooth animations on all devices.

Key Features

Demo

Flip on Hover

If you hover over the cards below, you will get a small sample of the possible animations with QuickFlip 4. If you click on each demo, you can also manually trigger the animation. This behavior is configurable. You can define what animations occur on hover, hover out, click, page load and scroll into viewport.

Flip on Click + Multiple Sides

On this demo you can see that you can flip between more than 2 sides. You can also see that you can flip more than just images. You can flip entire layouts. In this demo, you can click on the left and right sides of the containers in order to navigate backwards and forwards amongst the deck.

You could really take this concept and apply it to some really interesting scenarios. For example, what about an interesting Total CMS blog layout? Using the QuickFlip swatch, you could make each side a different blog post. Or you could have a blog grid and have QuickFlip on each individual post. When you hover over it, the image could flip to unveil the post summary.

External Controls

You can create your own external controls that can play, pause, and go forward/backwards. These controls can easily target a single instance or multiple at the same time.

Card #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Autoplay + Swatch

The below grid is another interesting layout for QuickFlip. There are a mixed animations. Some items will flip vertically, where as others flip horizontally. As the items scroll into view, the flip animations will start at random timing. The actions are set that if you hover over an item, the animation will pause. When you hover off an item, its animation will resume. If you click the item, you can manually flip the item.

This entire layout is controlled with 2 QuickFlip swatches (one vertical, one horizontal). The Quickflip swatch allows you to animate a large set of items with just one swatch. This makes it very easy to create standard flip animations for your website.

Elephant
Steer
Rhino
Lion
Cow
Tiger
Gecko
Gorilla
Panther
Racoon
Ram
Parrot

Screenshots

Tutorials

Loading...

Downloads

Updates

You may also like…

HANGOUTS

Next Hangout Session
Friday, August 12

PODCAST

Subscribe

For product releases and updates by email, please subscribe below.

© 2019 Weavers Space | Terms of Service | Privacy Policy