The Top 542 Interactions Webflow cloneables

A unique, staggered page transition that's created via. custom piece of code that allows the page transition to happen in Webflow.

A fun demonstration of animated icons with hover states in Webflow. They're very simple line icons with subtle, yet unique, hover interactions. One thing to note with the shapes that change size is that the size animation rather than scale, as adjusting scales adjusts the widths ever so slightly and doesn't make the animation look precise. Size and move were the only two animations used for these shapes. The only easing was used was ease and all the animations have a duration of .5 seconds.

A funny "game" inspired by Tinder's swiping functionality in Webflow. The site is best viewed at 1440 x 900 in desktop. This mini game is not built using Webflow's CMS and uses sections to create each swiping style page. This was built using Webflow's interaction and doesn't require any extra code.

Here's a short CSS code for creating floating labels on a Webflow form. This interaction creates a unique way to add interactions and animations to what would typically be a static input field.

A unique interaction perfect for portfolio pages or about company pages. As a user scrolls down the page the primary in focus element becomes highlighted and the background changes to a different image. This effect was created from only Webflow interactions and does not use any extra javascript or code snippets. Using Webflow interactions and the scroll into view trigger the opacity of the image changes and the previous items are hidden, while a text effect is accounted for. Overall this is a basic, yet sophisticated Webflow cloneable that will help bring any portfolio to life.

This is an interaction that displays an image on hover via a unique interaction in Webflow. Add this animated hover interaction to your Webflow site to add a dynamic interaction for your images.

Want a full page slider effect in Webflow? With this technique you will be able to create a full page slider. This is an illusion using the page loading interactions, making the page look like it slides to the next page.

A demonstration of text clipping with a gradient and a background image. The fontset used in this example is Heatwave Typeface.

Here's a way to create a load more option for content on a Webflow site. There are different techniques to showing more information and one of the best ways is via a load more button to display content dynamically. This method provides a light jQuery option with a focus (scroll to) the newly displayed content and a fade-out effect when all of the content has been displayed.

Here's a large demonstration of fancy custom cursors for your Webflow site. This allows you to add a huge number of different custom cursors, or helps you understand how to add custom cursors to your Webflow site.

A unique way of adding a social share button to your Webflow site. When a user hovers over the button the social sites sharing icons are shown. This method allows you to maximize space on your site and offer a unique approach to social sharing your Webflow content.

Here's a way to achieve a looping dotted line in Webflow. Easily add this to features sections, connecting two divs or items together and much more.

A simple login overlay panel for Webflow. A clean login UI overlay built with a minimal native Webflow interactions. Perfect for prompting a user to login upon taking an action, such as saving or bookmarking an item.

A unique animation perfect for a menu item for a Webflow. This entire animation was created with Webflow's native interaction. When hovering over the item the image slides in from a rotation with a blue background coming in first. The image and background appear on the right side of the menu item.

Here's a way to highlight text or categories of like and similar nature by hover over. This is a great way to add emphasis to certain items on your site/page by simply hovering over a category or text item. This could be extended for CMS items as well and your own collections.

This method showcases a 11x11 grid menu animation on click. The blocks in the grid appear in a specific, staggered to create this menu effect. The staggered effect plays in the opposite direction on the menu close. There are also micro interactions applied within the menu appeared.

A fun, sticky div interaction for Webflow. When a user scrolls down the page each div scrolls and locks into place until you reach the last div, and eventually the bottom of the section.

Blend modes meets an infinite neon animation via Webflow. The blur filter and mix blend modes were used to create the neon effect with a background gradient creating the color change across the screen. The blend mode was created via CSS as this was created prior to Webflow's native support so you'll need to add the CSS to get this to work properly. The infinite movement effect was created with Webflow's native interactions which shows the dynamic power of Webflow interactions. The infinite symbol was created using 3D transforms and the blob follows around the path.

A black and white styled subscription form login for Webflow. This free Webflow cloneable is a sign up/login UI with a textured background, rounded buttons, show/hide password and styled inputs.

Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.

A light themed, pop up email opt in modal for Webflow. A great way of adding an interactive, opt in pop up modal for your Webflow site. Build an email list faster and easier with this free cloneable.

A fun way of adding detailed information for your CMS items via a jQuery powered sidebar. The project uses a single CMS collection list to populate both the grid and the information when clicking on the card.

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

A free Webflow login in/sign up page design with unique loading interactions, custom inputs and much more. A perfect cloneable to easily create a login or sign up form for your Webflow site with fun style 3D illustrations and loading animations.

A free create account/subscription sign up page design for Webflow. This simple login and sign up page design includes gradient input outlines, show/hide password functionality in a dark theme with a beautiful background.

Rather then a boring toggle switch why not add a bouncing toggle switch to your Webflow site. This is an easy to implement bouncing toggle switch created with an easing animation.

A non-boring, full width image link with hover interactions in Webflow. A perfect way to add a full width section with unique hover interactions for your Webflow site. The bottom one is the one you'll want to copy and paste and use in your Webflow projects.

An example of a form label input animation for your Webflow site. When you click on the input the label waves above the input via each individual input when it's clicked on.

A three tier pricing table design with a floating primary central div for Webflow. Perfect to get your Webflow pricing page launched quickly with three different packages, shadows, and button hover animations and a fully responsive design.

A quick and easy way of adding a dark mode/light mode toggle to your Webflow site using native interactions. This is a perfect demonstration of how to implement dark mode/light mode toggle interactions to your Webflow site using native Webflow interactions.

A demonstration of how to change the layout of a page design via a click in Webflow. This method allows you to dynamically alter the page design/layout design on a Webflow site using native Webflow interactions.

Here's a demonstration of a simple to do list created in Webflow via javascript.

A perfect product preview card interaction and animation that upon card click shows an image preview modal window in Webflow. A great product card design with pre-built interactions and animations that are perfect for your ecommerce or product/sales pages.

A free Webflow membership login page design cloneable. This login and signup template comes with gradient border outlines, border interactions to create a shine effect, show/hide password, drop shadows and a simple nav bar and footer.

An interactive dark Chrome mockup design for Webflow. This Chrome browser window mockup is perfect to showcase screenshots of product pages and page designs. This is built entirely in Webflow and utilizes a number of native Webflow elements such as forms, interactions and more to create a beautiful interactive Chrome browser window.

An interactive dark corner opt in modal for Webflow with interactions for close. Easily add a corner style, email opt in pop up modal to your Webflow site that includes all necessary interactions for closing the modal.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.

Custom product image slider featuring animated image transitions

A simple method to create video explainer tour widget in Webflow. You'll need to view the live site in order to test the experience. This method allows for a way to embed a video into projects to help create an explainer video.

A light interactive Chrome mockup browser window created in Webflow. This mockup window features a number of unique native Webflow features to build a fully interactive Chrome mockup window for your Webflow site. A perfect way to demonstrate product images, product demonstrations and more.

A well designed centered pop up opt in modal for Webflow with premade gradients. This is a perfect way to add a pop up opt in modal to your Webflow site due to its premade gradient shadows which will make this modal window pop on any Webflow site.