Discover the best flip websites created by professional designers. Get inspired and start planning your perfect flip web design today!

GSAP FLIP Column Hovers

Cloneable of https://howtomakea.site/

***Update June 2022***
Added a very simple fix for chrome that reduces the overall footprint.

Interactive Book

Cloneable Interactive Book

Flipping cards! Finally have the time to create this.

This is pretty fun to include in a project for hiding less important information behind a catchy visual. This component can be used in a lot of scenario. Just be creative and you will find them interesting to play with. 

If you need help in implementation, DM me. I'll be around.

Have fun cloning. 😄

Inspiration from Maksim Lobanov's website.
https://maks.expert/

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

sketchzlab-cloneable-8

Flipping Cards

Webfonic Solids

Recreated from https://tympanus.net/codrops/2022/08/03/large-image-to-content-page-transition/

Livestream at https://www.youtube.com/watch?v=l8jhW4xeOq8

GSAP FLIP

GSAP FLIP & ScrollSmoother

Let's get it done with daily interaction #31!

This demo showcases a 180 degree flip effect on hover.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev for You - Daily Interaction #31

WebDev For You - Daily Interaction #31

Hello! So, today I did something different from what I usually do. This isn't a web UI, just a Dribbble shot but I pushed my limits and went for something that I'm pretty happy with. Flippable business card grid, all in Webflow. I tried to recrate Focus Lab's Dribbble shot which you can see here: https://dribbble.com/shots/6015319-Pinpoint-Business-Cards and just added a little bit of spice with the animation.

Click on them to turn them around. Also, psst, a lil detail: Did the front side logo with grid, borders and border-radius, so all in CSS.

Feel free to clone and play around with it. All design credit goes to the team at Focus Lab.

Business Card — Dribbble Rework

Business Card — Dribbble Rework

Watch tutorial at https://www.patreon.com/posts/71938710

GSAP FLIP (Main Tutorial)

GSAP FLIP (Grid View)

ZealousWeb

Sliders are the most attractive feature on any website, and flip sliders are the most beautiful and usable. Add Carousel to your websites using ZealousWeb’s Flip Slider WebFlow component to enhance your website’s UI and UX.

We have created the most aesthetically pleasing, stylish, and powerful WebFlow Flip Slider component for you. ZealousWeb’s flip slider is easy to use with its dynamic architecture, enabling you to adjust the Carousel setting from the setting menu under the Flip Box. 
Once installed and Activated, click go to Flip Box, and add one or more Flip Box items. The Flip Slider WebFlow component allows you to add images, texts, links, and the option to select different colors for the flip box buttons. Additionally, you can add more than one Carousel on the same page by creating different categories.


Zeal Flip Slider

Flip Slider

[ES]
En este clonable creo una efecto de Flip vertical y horizontal, mezclado con un efecto de mouse move over.

Puedes ver el siguiente tutorial donde te muestro como hacerlo paso a paso:
https://www.youtube.com/watch?v=EnAezYJpjkg

[EN]
In this clonable I create a vertical and horizontal Flip effect, mixed with a mouse move over effect.

You can see the following tutorial where I show you how to do it step by step:
https://www.youtube.com/watch?v=EnAezYJpjkg

*********
-Inspiration:
https://dribbble.com/shots/16211845-A-snippet-3D-animation-Lazarev

Efecto Flip Webflow

Efecto Flip en Webflow

Need some sweet Call To Actions for the bottom of your page? Well you can put it where you want, but I reckon these may just come in handy.

Discover flip websites built by the Webflow community

Discover flip websites built by the Webflow community