The Top 542 Interactions Webflow cloneables

Fullscreen unique loading animation for your Webflow site.

A unique demonstration of TypeJS and Webflow. Using your keyboard you can change the color of the background using TypedJS, simply type a letter from A-Z and the background color changes.

Here's a text stroke interaction based on the mouse movement for Webflow. Upon moving the mouse around the text stroke follows the cursor around the Webflow site.

Here's a demonstration of a call to action card with a hover animation in Webflow. The hover animation appears at an angle when the user hovers over the card. This is a great way of indicating that the card can be clicked on and visit another page. To create this animation a card wrapper is created with all the elements in it. Then a card wrapper was set to relative and a div block was placed inside of the card wrapper and set the position to absolute and 50% width and 120% height so that it could be angled without losing the height at the top. Then this div was moved 100% to the right from the card. With interactions the div was then rotated -10 degrees. An arrow as then placed in the slanted div block and rotated the arrow 10 degrees to offset the -10 degree angle. The border color also changes on hover.

Social media sharing buttons with hover interactions for Webflow. These social sharing buttons feature a unique aspect in which the entire background color changes on hover over to the relevant social media sites color scheme. A simple, yet fun social sharing idea. This was built entirely from Webflow interactions and doesn't require any additional code.

An animated, 3D layered social media sharing buttons for Webflow. When a user hovers over the buttons they pop up with a 3D layering effect on your Webflow site.

A beautifully designed hero section for an architecture firm/business in Webflow. This offers a unique, 3D style pre-loader with a full hero section. The hero incldues custom line style slider navigation, 2 lightboxes in each slide, one for image and one for video, search functionality, hamburger menu and much more.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

Here's a demonstration of utilizing ztext.js for 3D text effect on mouse move in Webflow. The background was created from an SVG generator.

Here is a wonderful collection of 10+ Webflow FAQ layouts and components ready to use on your Webflow site. Included in these are accordions of varying style and design. There are versions with pop-up modals, dropdowns, expanding cards, fully expanded FAQs and just about everything you'd need to add an FAQ to your site.

A simple review slider with a lottie star load animation. When each new review slide is loaded the lottie stars load one at a time. This is also mobile responsive and should work at all resolutions.

Make your Webflow site content dynamic and fully interactive with these draggable content cards. A fun way of creating a dynamic layout that users can move, modify and play with on your Webflow site.

This is a unique interaction in which images reverse movement based on mouse location in Webflow. There are two images facing opposite directions on both sides of the screen. When ou move your mouse on the x axis the images get further and closer apart. It's a very simple effect but can be modified to create endless opportunities. This used two identical images to save on load time and one was flipped horizontally on the y axis. Both images are set to overflow hidden. Then in interactions a mouse move in viewport interaction was applied to both images and they move on the x-axis.

A unique example of various text related interactions in Webflow. When the site loads each letter is gradually shown, scrolling down the page you're then presented with further interactions via the in-view and out of view interactions with offset to create a nice effect while scrolling. This is based entirely on Webflow's native CMS system. There is some custom CSS in order to have the customized Webflow CMS items and for cursor events.

A fun way of adding a 3D interactive Figma logo button to your site.

Here's a hover effect that adds a border and lines around a logo in Webflow. This effect was achieved by setting the border color to transparent on the initial state and then changing it on the hover state. Lines were placed with a width of 15px and a height of 3px. In interactions it was scaled from 0 to 1 on the x and y axis for the horizontal and vertical lines. To reduce the number of interactions required a class was created for the corner horizontal and vertical lines. Then a combo class was dded and placed the lines in the different corners around the logo. This allowed the use of only two interactions for the horizontal and vertical lines.

Here's a rebuild of MoMA's website navigation and menu bar. A great way to add a well designed and thought out navigation and menu bar to your Webflow site.

Another amazing Webflow full screen menu featuring a hover over image preview interaction that allows for dynamic images to be presented. This Webflow interaction creates a fun, yet professional animation to your Webflow's menu.

Here's a way to add a rounded menu/navigation transition to your Webflow site. When a user clicks the menu the menu loads from the top right to bottom left in a rounded transition.

A simple, easy to implement pop up modal for Webflow. Instructions on how to make it display only once, rather than on every page load. View the full instructions here: https://youtu.be/uSgSoEQD1vs

A thorough guide and technique for freezing scroll on the page on a modal popup. Closing the modal via the background click or by clicking on the close icon closes the modal and makes the page scrollable again. This is a thorough tutorial that helps understand the process, and how to implement the technique on your site.

An incredible, full page slider for Webflow. This custom slider features custom next/previous arrows, slide transitions and text description location all driven by Webflow's native CMS system.

Add dynamic, auto changing tabs to your Webflow site. These tabs can be changed automatically based on a time interval. Add a dynamic layer to your Webflow native tabs via this unique interaction.

Here's a simple pricing table with monthly or yearly pricing toggle for Webflow. The design is mobile friendly, user-friendly and designer--friendly. This pricing page includes a menu/navbar, pricing table, toggle with interactions and FAQ section.

Here's a Tic Tac Toe game created in Webflow. It was created with some custom code and native Webflow interactions.

Here's a way to build a toggle switch for your Webflow site using interactions. A great way to learn how to build toggle switches in Webflow and get a better understanding of Webflow interactions.

A unique scroll animation in which a spider crawls across the screen in Webflow. This animation was built entirely from Webflow's native interactions and the power of Lottie animations. As the user scrolls down the page the animation is triggered and then moved across the screen using interactions.

A geometric pattern design with hover animations created in Webflow. This technique and demonstration was created completely with Webflow's native designer and requires no additional codes or scripts to work properly. Using a bit of creativity and patience a few skew tranforms can build a seamlessly endless geometric pattern. Add in some border animations and you've got a fun, fully interactive geometric pattern in Webflow.

A full screen parallax scrolling interaction in which different sections are folded in on Webflow. This also has a subtle blurring effect to add extra design to the scroll interaction. This is built entirely from native Webflow interactions without any extra custom code or CSS.

A simple and easy to implement dark and light mode toggle for Webflow. This method was built using Webflow's native interactions and doesn't require any custom code.

Here's a way of adding text above a div on mouse hover in Webflow. This method allows you to add floating text that follows the mouse on div hover. This also keeps the text in line within the specific div that you are hovering on.

Looking to add animated play buttons to your Webflow site videos or other media? Here are a few different variations of animated play buttons. One variation repeats the play animated button, and the other animates on the hover over state. All of these are accomplished via Webflow interactions.

Here are 9 easy to use minimal page transitions for your Webflow site. Add some dynamic flair to your sites page transitions via these premade Webflow cloneable transitions.

Here's a technique to add a rotating images on page scroll via Webflow interactions. This adds a dynamic feeling to your site as your users scroll down on your Webflow site the images rotate around the page.

A simple and clean example of copy to clipboard functionality via a simple jQuery code. This example also provides a tutorial of how to add this to your Webflow site. This is perfect for creating any type of copy to click text to make it easy for your users to copy and paste any information you like.

Do you want to have draggable divs or content in Webflow? With this technique you can unlock the power of moving around divs on your Webflow site.

Infinite slider carousels built with Webflow native interactions and no custom JS code or necessary embeds.

A unique swatchbook hover interaction created in Webflow. When a user hovers over a swatch card, it sweeps out to display the card information. The entire animation and hover effect is built via Webflow's native interactions and doesn't require any custom code.

Here's a fun hero section that offers a hover slider image interaction for your Webflow site. The images move based on the mouse location and expand and focus on hover state.

This is a demonstration of how to randomly order CMS items on each page refresh using custom code. This was created because the random CMS settings within Webflow wasn't giving a random order on each page load. This is an example of how to truly have a random CMS list on each page load. This uses custom code and a class name assigned to the cards. There is also a non-CMS version of this as well.

Nine different video play button animations ready to be cloned to your Webflow site. This allows you to add dimensions and CTA's to your videos on your Webflow site.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

Here's a unique Webflow mouse hover interaction in which the background changes based on the location of the mouse on the page.

How far can you push Webflow's native interactions? In this demonstration you'll find a Mad Max movie intro page that showcases just how far you can push the limits of Webflow interactions. There are no gifs, gimmicks, or lottie/SVG animated files being used here.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

A steps section design for your Webflow site with unique scroll animations/interactions. Here's a unique cloneable that's ready to be added to your Webflow site perfect for a steps section portion of your site.

A unique text character interaction in which each text character slides in on page scroll via Webflow's native interactions. Keep in mind that while this is a fun interaction this requires each character to be situated in it's own div and could get complicated for sites requiring changes to the word. Although for a loading screen or for elements in which the text doesn't need to be updated often this is a great Webflow interaction that requires no additional code and utilizes Webflow's native interactions. This uses the element trigger While scrolling into view to animate each letter swooping in from the top to complete the word. It also features a unique hover interaction in which each letter changes size when a user hovers over each individual letter.

A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.

Here's a way to add a image splitting interaction on hover in Webflow. Using a grid and clip path to make this interaction happen. With this example when someone hovers on an image, the image opens in half and a text description is shown.

A simple yet fun Webflow interaction in which a custom cursor becomes visible upon item hover. This technique utilizes Webflow interactions but does have a small CSS snippet HTML embed, so be sure to add that. This example utilizes Webflow interactions Mouse hover events. When the mouse moves over an object the pointer scales accordingly. This is a fun, lightweight example of adding even more unique animations and interactions to your site.

A side navigation based on Integromats dashboard design utilizing expand on mouse hover states with further hover over interactions and animations.

Here's a demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

Here's a way to utilize Lottie files with a scroll into view interaction and position sticky. A great way to add dynamic animations to your site with animations on scroll.

Here's a way to add a counting timer in Webflow with a slider effect. This is a combination of Webflow interactions, CSS animations and custom JS. Since this is a custom CSS animation, it is completely based on attributes and more importantly modular. When scrolling down the boxes rotate out of place and create a fun interaction.

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.

A recreation of the Slack logo via Webflow native divs and Webflow interactions. A fun way of demonstrating what's capable with Webflow interactions and native Webflow designer. There are four different experiments of movement in this demonstration. This was built via Webflow grid and native interactions.

A simple and easy to implement page loader using all of the letters of the alphabet in Webflow. Everything is accomplished with Webflow interactions and zero custom code.

A fun demonstration of how to use jQuery to create a draggable canvas or game. This utilizes custom code within the page settings and will not work on mobile.

An easy to implement tooltips for your Webflow site. With this cloneable you can easily add tooltips to your Webflow sites.

A mobile ready product display card for Webflow. This mobile product card was created for smaller, responsive ready mobile screens. This card features a product image, slider orientated with a product name and price with a large call to action button with hover over interactions.

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.

This is absolutely wild, this is a demonstration of Civilization 6 built with Webflow. This cloneable features 12,400 elements, 1,800 styles, 1,200 assets, and 400 unique interactions. This demonstration shows the possibilities of what can be created with Webflow. The game features all 46 leaders along with their individual soundtracks and nearly every feature of the game. This project comes in at a whopping 124 GB. A true testament of what you can create with Webflow. With this cloneable you can dive in and see exactly how it was built. What's most impressive is a majority of the site is powered by Webflow's native interactions, there are is som additional code but the code is very limited for a project this large and with this many different interactions. Be sure to take a look as you don't want to miss it.

A well designed sign up/sign in page for your Webflow site. This sign up or sign in page features a unique confirm password interaction in which appears once the password field is starting to be typed into. The sign up page features a unique rotating logo image, email field, password, confirm password, create account and custom input field states (hover, selected, default).

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

This creates a 3D folding technique to a Webflow page on scroll down. Perfect for creating some 3D depth to your Webflow site and adding unique interactions and animations.

A testimonial slider animation for your Webflow site. Be sure to clone this so that the transition interactions are created for you without the hassle of recreating them.

A free cloneable hero section with blue and white fonts. Includes buttons, social media links and a pre-made menu.

Here's a concept design of a 3D contact form that follows the mouse on the page in Webflow. An interesting interaction that may help provide some inspiration for other methods on your own Webflow site.

Here's a fun example of creating an animated image on scroll effect/interaction in Webflow.

A full screen parallax menu/navigation featuring mouse interactions.

Cards with a full page transition effect upon click. Upon clicking the transition effect and full screen modal is loaded. Each card has individual colors. Be sure to watch out for the combo classes upon duplication and adding new interactions for each card.

A very unique, fold in curtain style menu animation navbar for Webflow. The menu is revealed from both the top right and top left of the page. You could add different images or colors for the panels coming in. You could also add a variation of different textures or styles to those divs, or keep it simple and use this example. The animated menu was built using Webflow interactions. The rotating text inside of the menu was created with Illustrator, After Effects and Lottie.

A custom page transition for your Webflow site created with Webflow interactions and a bit of custom code. This transition provides a nice, multi level swiping transition from left and then back to the right.

Here is an interaction for hovering over a card using Webflow interactions. Simply clone this and add it to your site to add a dynamic hover interaction to your Webflow site.

A beautifully designed opt-in/sign up modal interaction with Webflow that provides a unique way to sign people up or opt them in via an interaction. The modal has a custom bounce interaction on load and you can use the X or click anywhere on the page to close the box.

A demonstration of how to add Cookie Consent to Webflow using Finsweet's Cookie Consent. This cookie consent Webflow cloneable features various designs for cookie consents, including modals, banners, pop-ups and more.

Here's a way of adding a custom, target style cursor to your Webflow site. This cursor creates both a vertical and horizontal line on the page with a red dot, much like a target/red dot on your Webflow site.

Add drag and drop list functionality to your Webflow site with this javascript library. This uses Sortable.js to create sortable lists within Webflow. Perfect for to-dos, sorting, and other functionality that may be needed for your Webflow site.

Here's a way to add a custom, social media sharing hover interaction to your Webflow site. When a user hovers over the icon on the page a social media sharing interaction is triggered that displays 4 different social media sharing sites.

Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.

Advanced pricing table that provides a loading bar indicator for individual features. Includes hover interactions, animated bars, sticky header and much more. This also is mobile ready although be careful about hidden columns.

Build a multi-step estimator calculator for your Webflow site. This is perfect for unique pricing pages, contact forms, and internal tools for your team.

A newsletter form input with a pop up data privacy notice that appears once the email input field is active. This can be hooked up to Mailchimp or whatever email newsletter you're using.

A fun glitching animation effect in Webflow and a mouse hover masking interaction with a custom cursor icon.

Dark mode toggle for Webflow driven by a cookie so that it remembers your users settings on whether or not they want dark mode or light mode on your next visit.

A unique 3D image mosaic with glare effects and 3D transforms in Webflow. This cloneable uses 100% native Webflow interactions to achieve the effects with a large number of mosaic tile divs for the images. The Webflow interactions utilizes to create this effect are Rotate, Filter and Move via Mouse Actions.

A simple way to add social media links with a hover animation to your Webflow site.

A simple and clean app download call to action in Webflow with animations and interactions.

Show/hide image on text link hover.

A way to reveal sections/data on Scroll. This uses interactions with opacity and move.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

Reveal an image on initial hover, on second hover remove the image from the card. Difficult to achieve as you need to sequence the triggers and hide elements to control the interaction.

A fun popping credit card hover interaction in Webflow. When a user hovers over the credit card it bounces up and then back down using completely native Webflow interactions.

A clean and unique interactive CMS slider for Webflow. This slider features a variety of unique features including a mouse hover over effect in which text gravitate towards the mouse, a bubble radar effect and unique slide transitions for each slide. This was built with Finsweets client first framework and offers fluid responsiveness design.

Looking to build a quick in Webflow? Here's a guide and tutorial of how to build a Quiz in Webflow. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

A beautifully designed estimate, investment portfolio, quote page in Webflow. Perfect for an investment portfolio/funds, or anything requiring detailed investment/financial quote structures. With a little bit of work this could be made both responsive and CMS driven, allowing for clients, employees or others to make this for internal sites.

A way of creating a 360 degree spinning image via SpriteSpin

A great example of a slide in full page animated menu with mouse hover effects.

Here's a unique test/experiment to create an advanced LED display hover effect in Webflow. This is a great demonstration of what you can build with Webflow interactions and may lead to some. inspiration for future Webflow project builds.

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