The Top 554 Interactions Webflow cloneables

A unique button design for Webflow with hover interactions. This purple styled button features a hover interaction in which the purple arrow expands and grows when hovering and then shrinks back to the original design on hover out. All of the button animations are built with native Webflow interactions.

Add a Vimeo video to the background of your Webflow site with this cloneable. This allows you to run the video as a loop in the background. If you click on the unmute button the video will play from the beginning and the sound will become activated. This allows you to add Vimeo videos to your sites with better flexibility and increased usability. This requires a bit of custom jQuery code and the Vimeo API must be included if you want to utilize Vimeo iFrames. You can find the jQuery and relevant code within the custom code settings of the page. Take note that this also utilizes data attributes and Webflow interactions to work properly.

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

A pricing/quote calculator slider built with custom Javascript for Webflow. Here's a great way to add a custom pricing quote with a slider and forms to create an accurate pricing quote for your clients in Webflow.

A fun 404 page for Webflow featuring a scrolling marquee and unique hover over interactions. This is a rebuild of the pluto.app/404 page. Featuring various scrolling marquees at different speeds with a gradient background and mouse hover link interaction.

Here's a fun text effect in which the text fades away on mouse hover in Webflow. A great way to add a dynamic animation interaction to your Webflow site.

A 100% native CMS based Webflow horizontal scroll technique. This CMS horizontal scroll animation was built solely with Webflow native interactions without any custom code. The method was to use a second collection list and make the length of the scroll trigger wrapper always proportional to the width of the horizontal strip. This way nothing to adjust or change in the designer when the number of items changes, and the animation will always feel consistent and smooth.

Easily add dynamic and interactive FAQ sections with accordions and slide in interactions to your Webflow site. There are 5 different designs that include scroll into view interactions as well as expanding/closing accordions, tabs and more.

Here's a wonderful 3D card hover effect in Webflow. When a user hovers over a card a 3D effect is shown and folds down and additional information is displayed. This is achieved via interactions and rotates the image 90 degrees back and a content wrapper rotates 90 degrees on hover. The effect was achieved by placing an image wrapper and a content wrapper inside of the 3D wrapper. The 3D wrapper has a child perspective applied to it via the transform option. This allows the div block inside of the wrapper to have a 3D effect as they rotate in and out. The transform-origin for the image wrapper was set to the bottom and the transform-origin for hte content wrapper was set to top. In the interactions rotation and opacity animations to both the image wrapper and content wrapper. Both div blocks are rotated on the x-axis.

A unique way of adding dynamic and animated portfolio items to your portfolio page. These bubbles automatically float up and include mouse interactions to access different pages.

A rotating animation that transforms an image before and after the item scroll in Webflow. This is perfect for before and after effects and can be used without the rotation effect as well. There's also a mouseover interaction that creates a magnetic pull of the image.

Here's a way to add a glitch on hover effect to divs/cards that have images inside of it within Webflow. A fun way of adding a dynamic glitching effect to your Webflow site.

A very cool, custom OGL cursor effect for Webflow. You can edit the speed, count of lines, friction, colors and other settings. A fun and dynamic cursor effect for your Webflow site.

A stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

Here's a unique, recipe card animation created in Webflow. This is perfect for showcasing recipes on your Webflow site in a unique and interactive way. When hovering over the card the image becomes full height, and the card moves forward on the z-axis. The card was placed in a wrapper with a perspective applied to it to bring the card forward. Also a timer icon shows up on the top right corner to display the time it takes to create each recipe.

Here's a way to create a page load animation in Webflow in which circles appear at different intervals to create an animation effect. This entire animation was built using Webflow's native interactions and doesn't require any custom code to create it.

An interactive blob and SVG morph technique using anime.js in Webflow. This is a great example of utilizing Anime.js and a blotter text effect for your Webflow site. When a user moves the mouse/cursor on the page different interactive effects take place to make the site entirely dynamic.

A fun, fully responsive slide in menu animation for your Webflow navigation. This menu slides in via a dynamic animation and more importantly is already mobile and responsive friendly.

A full page, dark themed, hamburger menu navigation for Webflow. Built with interactions and animations for sliding the menu in as well as hover states for the links.

Here is a beautiful, image based portfolio with smooth transition delays and snap-to-scroll properties in Webflow. This CMS powered Webflow technique features snap scrolling functionality, mouse cursor hover over effects and a smooth transition with delay perfect for any portfolio page in Webflow. Please note that there is code within the closing body section in Page settings required for the smooth scrolling using Luxy.js.

A unique collapsing text Webflow interaction that utilizes native Webflow interactions and custom CSS for the text shadow effect. This is perfect for hero sections or areas where you'd like to add unique text animations. This utilizes Webflows page trigger interaction with when page starts loading. Using a few different divs and two text elements you're able to produce this looping effect on your Webflow site. A powerful yet easy to implement interaction that will make any Webflow site pop.

Here's a technique to add growing divs or sections on mouse hover in Webflow.

Here's a simple way to create tall horizontal accordions within Webflow. This is implemented using interactions, some custom CSS properties for the vertical text, and a touch of magic. There is a lot of math involved with this implementation and will need to be modified if you want to remove or add any accordions.

A CMS based Pinterest masonry grid design for Webflow. This unique styled masonry grid is powered by Webflow's native CMS and provides unique hover over interactions.

A free Webflow cloneable for a social sharing button interaction. When a user hovers over the button it expands to showcase 4 different social sharing sites, Behance, Dribble, Instagram and Twitter. This social share button was created solely from Webflow interacations and is a fun way to add social sharing or a contact to your Webflow site.

An interactive horizontal scroll pricing calculator for Webflow. This lets customers or prospects calculate the pricing of your services via an interactive pricing calculator.

A unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.

Here is a pressed state effect for buttons like the Google Material design system. Upon clicking it the button has a ripple effect allowing for the user to understand that the button was clicked and an action was performed.

A fun and clean hero and menu loading interaction in Webflow. When a user loads the page the text appears to load at different intervals, move around and then eventually load the entire page including the menu. There's a scrolling text marquee at the top of the page, parallax style scroll interactions, a menu with slide in interactions and much more. This was built using all native Webflow interactions and was built with the Finsweet client first framework and is fully fluid responsive.

An example of an expanding image cards on hover menu and navbar in Webflow. This full page menu adds a hover interaction that expands cards or images on hover in your Webflow menu.

Here's a clean, beautiful language toggle button that can be implemented on your Webflow sites. There are hundreds of flags that you can match with any language you may need.

Here's an example of creating 3D interactive balls via Webflow using only divs and color gradients, no images or custom code was used to create this effect. When someone moves the mouse on the Webflow site the balls/divs move in different directions.

A unique 3D scrolling interaction created for Webflow. As a user scrolls between sections each transition has various 3D effects with the image coming in one way and the text flying in another way. A majority of this was created with Webflow's native interactions while some minor CSS was utilized for the scrolling effects.

A beautiful, draggable slider for your Webflow site. Some notes about the draggable slider, in mobile view it uses hammer.js for the slider. Images can be updated by changing the attributes found in each <li> item>. The view details URLs can be updated the same way. You can also change the view details and view project by changing the data-video to false. If you want it to say something else you can dive into the code and update that way.

A well designed lateral menu animation built for Webflow. When a user clicks on the menu tab the entire menu opens up slowly sliding in to expand over the entire page. This was built using Webflow interactions with no custom code required. There's an interaction animation built for both opening and closing the menu.

Add a hover over highlight animation to your accordions in Webflow. This adds another layer of dynamic effects to your accordions when hovering. No custom code needed and all done via interactions in Webflow.

Add a pause/play button to your sites background video in Webflow.

A free widget to display your customers Trustpilot reviews and feedback, or other feedback and reviews to your site via a slider element.

Here's a project card animation on hover in Webflow. When hovering over the image a gradient overlay and text appears on the card. Lines also animate around the image and blow the project title and below the image. The effect is achieved by placing the lines in teh correct position around the image and then setting the initial scale to 0 in interactions. The lines horizontal x-axis is set to 0, and the vertical line is also set to 0. The transform-origin for each line around the image is set so that each line animates into the correct position. Then the lines scale back to 1, and the gradient overlay and text changes from 0% to 100%.

A very cool scrolling spiral menu text effect. Opens up a fun opportunity for a unique full screen menu build.

A simple and clean Hero section for a Webflow site that features content on the left and a large lottie hero image on the right. A perfect lightweight and clean Hero design perfect for any SaaS or tech company. The Hero section has a bold statement, two buttons and a large demonstration Lottie image. The design is fully responsive and can be used used to add a hero section to your Webflow sites landing page in seconds. This also uses Webflow's interactions for a unique logo animation on page load. This cloneable does not use any custom code or HTML embeds so adding to your site is super simple.

A CMS driven accordion calendar for Webflow. Perfect for an events page or about page on your Webflow site. In order to use this be sure to copy the hidden section which includes an unbounded CMS design.

A fully built FAQ accordion section powered by Webflow native CMS collection with native interactions and animations. A great way to add a frequently asked question section to your Webflow site or clients site that is powered by the Webflow CMS system.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to your Webflow site.

An amazing redesign and rebuild of Webflow.com's navbar and mega menu based on 2021! This mega menu features a full width menu with custom dropdowns, lists, custom icons and a grid layout. A great starting point for building out a mega menu in Webflow based on Webflow's beautiful menu design.

A unique expanding portfolio hover interaction built completely with Webflow interactions. When a user hovers over these portfolio items they expand to showcase a larger version of the image. This cloneable was built using entirely Webflow's native interactions and does not require any additional code or HTML embeds. The Webflow interaction uses the Element trigger on mouse hover targeting the class so that all classes will have the same Webflow interaction. When the user hovers over the size of the item expands, on hover out the item returns to the original state. A clean, lightweight solution to create expanding portfolio items in Webflow.

This demo showcases a technique of using a SVG/Lottie menu that comes in from the right to the left. The path was created in Illustrator and then animated with After Effects. This was then brought into Webflow and the animation was triggered alongside a menu opening interaction. Animations were also added for the open and close buttons.

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

A way to achieve a 360 degree spinable book. This was built with CSS grid, responsive typography, 3D transforms and custom CSS properties.

Help your users understand what they should be searching for via this rotating search suggestions.

Here's a unique clickable process/steps section in Webflow. Whenever someone clicks on each step an interaction triggers that displays the number as well as further information about that specific step. Simply edit the content, update the interactions based on your requirements and enjoy a unique steps/process section on your site.

Here's a way to dynamically change font size on click. This allows you to offer different font sizes for content for your viewers and readers. A wonderful technique to help accesibility of your Webflow sites.

Here's a way to create a custom automatic slider for the hero section of your Webflow site. This was created with the native slider component and Webflow interactions.

A fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

Here's a rebuild of Webflow (2020) navbar and menu that you can add to your Webflow site. A perfect starting platform for building a dynamic navigation bar and menu to your Webflow site via this cloneable.

Here's a great way to add a dynamic, image changing section based on scroll in Webflow. The left section is absolute image that changes as you scroll down the page further.

A demonstration of product cards in Webflow that utilize hover over interactions to effect both image and title. When a user hovers over the cards in Webflow the image div grows and the title appears to follow the mouse while hovering over each card. A fun interaction and a way to showcase products in a unique and creative way.

Here are well designed service cards that have a rotation hover interaction that highlights and rotates the card for Webflow. This perfect for adding 3D dimension to a Webflow site via service cards, project cards or even pricing tables.

A free cloneable hero section that includes a scroll to reveal text interaction. As the user scrolls down the page the next section is zoomed into and the text then begins to appear. Make sure you have selected the body (all pages) and update your typography settings to 1vw for it to work.

Here's a well designed, full screen navigation menu with hover image interactions and slide in transitions for Webflow. A unique, classy styled navigation and menu that provides interactions when hovering over text links. The images change out and there are text effects.

Here's an example of a 360 degree image showcase featuring Nike Air Jordan 1 Retro High Spider-Man origin story. Please note that this example only works on desktop currently.

A right side menu for Webflow that slides the menu in from the right hand side on click. This menu features all of the interactions required to create a Webflow menu. When the user clicks on the hamburger button the menu slides in from the right part way on the screen. There's a menu item hover interaction which has a highlight effect that grows on hover and then fades out on hover out.

This demo showcases a unique card flipping animation on hover in Webflow. In this effect a panel rotates in from the left to reveal more information about the image, or post and the image slides to the right to make room for the flipping panel. The effect was achieved by placing an image wrapper and content wrapper with a child perspective added to it. The content wrapper is set to 50% within the 3D wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to overflow of hidden so that the image slides to the right you don't see it beyond the wrapper. Interactions were created via rotation of the content wrapper -90 degrees to 0 degrees and moved the image to the right 50%.

An interactive pop up modal for Webflow. This pop up modal includes close interactions, close on outside click as well as is fully responsive.

This is a demonstration of Webflow's new blending and backdrop effect filters in action. This cloneable features both blending and backdrop effects in a fun art quiz. The artwork that's being questioned is covered by the Screen blending effect with a Blur backdrop filter over it. When a user selects an answer the blending and backdrop filter is removed to showcase the artists artwork.

A horizontal scroll interaction built for Webflow using native Webflow interactions. This horizontal scroll allows you to use as many panels as you'd like and the panels don't need to be the same width or unit type. This horizontal scroll utilizes the While scrolling in view element trigger, and then utilizes only the move scroll action to complete this Webflow interaction. To add other panels simply add a new panel div in the track-flex section.

Here's a way of creating a 3D animated and interactive box model that flips and rotates based on mouse movement in Webflow. Playing around with CSS grid functionality this demonstration creates a net of a box using CSS grid, then just folds the sides together using the transform options and native Webflow interactions to create a 3D box.

Here's a great way to add dynamic hover states to your team cards in Webflow. With this profile card design several hover states are displayed with various scaling and movements. The top circle has social media icons to make the card more functional and display relevant information. The bottom has the name of the person displayed in a rectangle. The hardest part of this interaction was adding all the shapes into the card. Specific wrappers were used and positioned around the wrapper in an absolute position. For the rectangles at the bottom they were skewed on the x axis -20px. Take note, when you add a move interaction to these shapes the skew property gets removed so you have to add the skew property to the initial state of the interaction as well.

A fully responsive 3D flippable/foldable card effect on hover. You can also achieve this via the scroll method as there are two options in this demonstration. These affects were created using Webflow's native interaction and require no additional code. The interaction uses hover event and rotate and move actions.

A unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

Here's a unique hover effect for the portfolio cards in Webflow. When hovered, the card image expands and fades into a video. There's an infinite marquee that is then overlaid to provide a unique effect.

A fully dynamic hero slider that's responsive and includes a vertical slider that switches out the primary heros image. This was built entirely with Webflow, some CSS and Webflow's native interactions. At the top you'll notice a horizontal marquee, this is powered by custom CSS which you'll find via an HTML embed. You'll also notice an extensive use of Webflow native sliders and a variety of individual interactions for each slide change associated with each and every slider. A very extensive use of Webflow sliders and interactions. This hero slider does not use custom code within the page settings so you'll want to dive into the HTML embed and then the Webflow interactions which make this entire thing possible.

Here's a way to add a horizontal scrolling section to your Webflow site. It's perfect for timelines, features and other similar sections of your site. This technique also has a scroll into view animation for each point.

Here's a fun way to add a 3D text stroke effect on hover in Webflow. When a user moves the cursor around the page the text creates a 3D stroke effect following the cursor around the page.

Three different advanced modal examples for your Webflow sites. Automatically adds scrollbar if the content exceeds the maximum height of the page/modal. Also features modal with the scroll the complete modal height, scroll the content within the modal, and ability to lock the background if you happen to scroll outside of the modal window.

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.

A simple landing page perfect for a digital business card via a QR code or other short URL. This design feature a hover slider effect and large cards to make it easy for users to navigate your digital business card site.

An accordion with Native tabs absolute sidebar navigation for Webflow. This combines the power of the accordion and native Webflow tabs element with some minor custom code for the numbering of each category. Due to this the method will not work for Webflow CMS. Perfect for an online course, learning module or similar style site.

A massive grid that moves objects into view as the mouse moves into the viewport. This is perfect for large product pages, portfolio items and much more in which you want to add a dynamic and interactive grid to your Webflow site. This demonstration uses a combination of Symbols/components and Webflow's mouse move in viewport interactions to generate a large grid that can be navigated by the users mouse. As the user hovers over the image or item card the image expands. All powered without any custom code and using Webflow's interactions and symbols/components.

Five different image mouse trailing effects in Webflow. When a user moves the mouse cursor on the site the images pop up and follow/trail the cursor. These different effects allow you to add a new layer of dynamic elements to your Webflow site that open up all types of possibilities.

Here's a unique way to add a timed automatic slider to your Webflow site. Typically native sliders stop autoplaying as soon as you interact with it, however this version allows it to continue to play even after interacting with the slider. The progress of the slider is tracked via a lottie animation. This is accomplished via native interactions and CSS only code.

Another beautifully designed hero section for your Agency site in Webflow. This cloneable features a dark/light toggle, a full screen slider with custom navigation dots along with slide number change animation, and a full screen hamburger menu navigation.

A custom product display using accordions in Webflow. This product display for Webflow is built with Webflow's native builder and utilizes an accordion like effect with Webflow's native interactions. Each card when clicked explands to show additional product information including a an image, title, product description and price.

A great way to add mouse aware, location aware slider navigation interactions to a slider.

A custom slider transition that zooms into the next slide for Webflow. A great way to customize the boring slider transition and adding a unique flair to your sliders.

Here's a way of adding a custom cursor to your Webflow site via interactions and one line of CSS code.

A real estate hero section design for Webflow. This hero features a custom load animation, call to action buttons, fully designed slide in menu/nav bar and much more. This features a JS snippet to disable scroll once the menu is open, which can be found in the home settings before the body tag.

Easily build your nonprofit or charity site with this cloneable hero section in Webflow. This features fullscreen tabs layout with the ability to display large text content, a full screen menu with unique hover interactions, video lightbox and search functionality.

A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

Here's a fully responsive, full page slider with diagonal transitions. Here's a great way to add dynamic slider animations and interactions to your Webflow site slider.

Add a hover slider style interaction animation to your site for revealing an image, or div content.

A unique way of displaying a falling leaf via scrolling interactions with Webflow. This was not built with any lottie animations however was built entirely from one large Webflow native interaction via the While page is scrolling functionality. The leaf sits within an invisible circular track that rotates and guides the direction of the leaf. A great example of what's possible to achieve via Webflow's native interactions and a bit of ingenuity.

A great way of adding draggable background maps to your Webflow site. This is an example of a topographic map of Switzerland although could be adapted to other maps. This is easy to embed to your Webflow site.

Add a stacking slider as inspired by houseof.world. This adds a fun, 3D effect to your sliders that transitions and moves the cards forward, and to the back upon next slide.

Build a staggered animation with gird and Anime.js in Webflow.

Here's a 3D layered team section that opens up social media and contact information on card hover in Webflow. Lottie was implemented for the social media icons on the hovered animation. This is a perfect way to allow additional information without cluttering up the team section of your website.

Four different magnetic mouse hover button designs. These buttons are great for a CTA button due to the stickiness of the button interaction as it tends to grab your attention and keeps the user focused on the CTA. By using the mouse hover over element interaction to create this animation which makes the cursor act like a magnet to attract the button.

A product card that displays the title on hover and follows the mouse in Webflow. This interaction is a very well designed interaction that flips the image and provides the title on mouse hover. The title then follows the mouse cursor over each card, displaying the relevant product names title.