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

Asad Digital

Hi! Here's the new version of the flipping cards. Feel free to clone it and use in your projects.

Flipping Cards

Came across someone inquiring this type of custom interaction menu. So, here it is, FREE cloneable for everyone.

As indicated this cloneable is inspired by digital agency named, Baunfire [https://www.baunfire.com/]. Check out their website for more inspiration. 😉

The types of interaction used here are all doable natively. By playing around with 'Mouse Move Over Element', 'Mouse Click' and 'Mouse Hover' interaction, you can achieve this.

Have fun cloning. 😄

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

💖☕ 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
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab

sketchzlab-cloneable-component-2

Custom Interaction Menu

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

Previously I have created a FAQ accordion cloneable but the opened items will not auto collapse when other items are opened. Using pretty much the similar interaction from the previous cloneable, I added some custom scripts to conditionally add a combo class and trigger clicks.
Special thanks to Yesse from Finsweet.

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

Have fun cloning. 😄

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

💖☕ 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-14

Auto Collapse FAQ Accordion

A custom gallery and showcase with the combination of Webflow Slider, Lightbox and CMS capable. All these are doable thanks to Finsweet hacks. With a little tweak in the code and be creative with the integration, here's the new cloneable.

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

Have fun cloning. 😄

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

💖☕ Support us by buying us a cup of 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-15

Custom Image Gallery (Slider + Lightbox + CMS)

A custom hero slider using native Webflow Slider + Finsweet Hack 9 (Custom Navigation Dots with some own personal twist.) This is fully mobile responsive. You may apply your own custom interactions as needed.

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

Have fun cloning. 😄

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

🚀 Our cloneable library: 
https://www.sketchzlab.com/resources/overview

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

💖☕ Support us by buying us a cup of 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-17

Custom Hero Slider

A frequently used component, FAQ accordion. Item expand or collapse by click. With a little custom touch-up, I added a focus/highlight interaction.

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

Have fun cloning. 😄

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

💖☕ 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-10

F.A.Q. Accordion Style

Before/After component built entirely using native Webflow interactions. With a few simple combinations of the following, you can build this easily too.

Fixed width before/after images, position absolute, and interaction to resize containers.

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

Have fun cloning. 😄

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

💖☕ 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-12

Comparison Interaction

This cloneable is not for CMS content. A combination of accordion and native Webflow Tabs element with minor custom code for items number counter for each category.

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

Have fun cloning. 😄

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

🚀 Our cloneable library: 
https://www.sketchzlab.com/resources/overview

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

💖☕ Support us by buying us a cup of 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-19

Accordion + Native Tabs Element

Clieck to expand

clieck-to-expand

Hover over images to catch a glimpse, then elevate your experience with a simple click.

Explore on Click

A simple animation for form labels during focus-in and focus-out. The trick is pretty easy. The custom code just add/remove a combo class based on the condition applied on the form inputs. Using similar method you can be creative a create all sort of animations.

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

Have fun cloning. 😄

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

💖☕ Support us by buying us a cup of 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-16

Custom form label on focus

This demo showcases a menu trigger animation on click and hover.

Inspired by: https://venus-story.com/.

WebDev for You - Interaction #161

WebDev For You - Interaction #161

Adding Style and Interactivity to Your Website.

Card reveal animation is a popular design trend that can add a touch of style and interactivity to your website. This technique involves hiding content behind a card or tile and revealing it when the user clicks over it. It's a great way to create a more engaging user experience, as it encourages users to explore your website and interact with your content.

Figmatic, based in Bangalore, India, specializes in Webflow development and has extensive experience in implementing animations and interactions.

Show More Animation

Card Reveal Animation

Memberstack

Saw a forum discussion asking for an easy way to open/select a Webflow tab onHover instead of onClicked, so I whipped up a really quick MemberScript to help. 

All you have to do is add the attribute ms-code-onhover="click" to your tabs. 

This script will work anytime you want to turn a hover event into a click event. 

Video in the project. Link to MemberScript #79. www.memberstack.com/scripts/79-click-onhover

Discover mouseclick websites built by the Webflow community

Discover mouseclick websites built by the Webflow community