QuickFlip 4

0 reviews

icon

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

bullseye-pointer

Click, Hover, Scroll

You have full control over how to interact with QuickFlip. You can flip on click, hover, scroll and on page load.

window-restore

Unlimited Sides

You are not limited to just 2 sides. QuickFlip will magically rotate through all of your sides and make it seem like there are only 2 sides.

undo-alt

Custom Flips

You have a lot of control over the flip animations. The flip can be horizontal or vertical. You can also add lift to make the animation raise or lower into the page.

play

Autoplay

You can set the flip animation to loop. You can set it to loop infinity or a set number of times.

swatchbook

QuickFlip Swatch

There is a QuickFlip swatch that can allow you to quickly create flip animations on a large number of items. This also works well with Total CMS.

sliders-v

External Controls

You can use external controls (buttons, links, etc) in order to play, pause, flip forward or flip backwards.

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

Reviews

0 reviews


No reviews yet.

We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.

Screenshots

screenshots
screenshots
screenshots
screenshots

Tutorials

Secret Foundation Swatches
Secret Foundation Swatches
How to use the QuickFlip 4 Swatch
How to use the QuickFlip 4 Swatch
How to use the QuickFlip 4 Stack
How to use the QuickFlip 4 Stack
QuickFlip 4 Stack for RapidWeaver
QuickFlip 4 Stack for RapidWeaver
QuickFlip 3 for RapidWeaver
QuickFlip 3 for RapidWeaver

Downloads

QuickFlip Demo Project

Uploaded by Weaver's Space

Updates

v4.0.5

  • Update GSAP animation libraries to latest version

v4.0.4

  • Updated the GSAP library to the latest version

v4.0.3

  • New online Help links when access from inside Stacks Library.
  • Improved messages when stacks are missing from library in a project.

v4.0.2

  • Update to the latest version of the GSAP animation libraries

v4.0.1

  • Update to the latest version of the GSAP animation libraries
See all updates Thanks!

You may also like…

scroll me

HANGOUTS

Next Hangout Session
Friday, November 22

Subscribe

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

© 2024 Weavers Space | Terms of Service | Privacy Policy

All of our stacks are licensed on a per user basis. Click for more details on Agency Licensing.If you purchased a previous version of this product, you are eligible for a discounted upgrade. You must purchase the upgrade with the same email that you purchased the previous version with.
HelpShelfHelpShelf