The Top 535 Interactions Webflow cloneables

A fully cloneable mega menu navigation with full page dropdown interactions for Webflow. A great way to quickly get your Webflow menu/navigation launched with pre-built dropdowns, CTA buttons, and more. This was built with clear class names, native Webflow interactions, basic dropdown triggers and fully responsive.

Here's a fun example of a hover interaction for a menu or navigation in Webflow. When hovering over the links different images are displayed in the background of the site. There is also a hover underline under the text, with different colors for each link.

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.

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

Here's a way to add a dynamic counter metric section to your Webflow site. This is accomplished via the simple JS available within the custom code section of the page settings.

A spiral 3D spinning interaction that requires no WebGL, third party libraries or any custom code. This was built entirely in Webflow with Webflow's native interactions. As a user scrolls down the page the images spin around and rotate around the page. A fun and unique interaction that showcases the power of Webflow. This is perfect for portfolios, or other items on your site. This was built utilizing While scrolling in view and taking advantage of only two options, move and rotate. Essentially the items layout allows for the positioning of the item. By utilizing class names each class will have the same result and effect.

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 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.

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.

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 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.

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.

Various demonstrations of how to create magnetic elements in Webflow. This method is typically used for buttons but can be implemented on a variety of objects using a single interaction and class. In this demonstration a parent class called is-magnetic has an interaction tied to it that allows the items in this class to be "magnetic" and drawn to the cursor. A

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

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

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 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.

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.

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.

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.

Here's a technique to autoplay videos on horizontal scroll in Webflow. Using the power of Youtube APIs, window scroll events and the power of Webflow interactions you're able to now create horizontal scroll animations in which videos are automatically played or paused on scroll events. There's also a delay on the play function to add a bit of an intro animation to each video by mixing the scroll into view interactions.

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.

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 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.

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 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.

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.

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.

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 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's a technique to add growing divs or sections on mouse hover in Webflow.

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.

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 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.

Here's a way to create a horizontal scrolling slider item based on a Webflow CMS. The top one is an example of it in use, while the second one is easier to copy and paste into your projects. Just unbind it from the collection and you can then copy and paste. It's limited to four items so if you end up adding more you'll need to go in and edit the interaction. Please note that there are separate interactions for mobile, tablet and landscape.

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.

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

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'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 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.

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

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.

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 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.

Looping lines and wires on page scroll via background animation all through Webflow interactions. This interaction adds a fun background animation to your Webflow site that creates lines moving randomly in different directions on your Webflow's background. As you scroll down the size of the lines grow gradually larger.

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.

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 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.

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.

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 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.

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.

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.

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.

A fun way of adding dynamic radio inputs animation to your Webflow site. When you click on the radio inputs they expand when selected. Simply clone the project and add this dynamic interaction to your Webflow project.

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%.

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 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.

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.

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

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 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.

A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.

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

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.

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

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.

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.

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.

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.

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 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.

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.

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.

A full page hero slider section featuring full page image and text transitions in Webflow. A hero section built for photographers and videographers featuring a stylish 3-column slider with large, modern page loading, and a full screen hamburger menu.

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.

A unique, fancy background hero with text masking effect over a background autoplay video.

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.

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%.

Five different mega menu navigation designs for Webflow. This helps you add unique mega menu designs to your Webflow site that feature different mega menus dropdowns perfect for your site.

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 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.

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.

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.

Tabs can be a pain to create in Webflow. With this cloneable you can get started building your tabs faster and built on top of the client first system by Finsweet. A perfect way to add tabs to Webflow quickly and easily.

A unique 3D depth of field native Webflow interaction. As a user scrolls through this section the images come towards you from the back of the page. This technique was built using only Webflow interactions and does not use any extra custom code or HTML embeds. This Webflow interaction utilizes the While scrolling in view trigger, it then moves the Z property from 0 to 250 rem. Each individual item also has an opacity and filter applied to it as it's scrolled into the view. A well thought out and unique Webflow interaction that will surely impress your visitors.

Add a unique and customized menu and navbar to your Webflow site. This example provides a unique feature of an image preview on link hover in the full page menu/navbar of your Webflow site.

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

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

An easy way to add expanding tabs with interactions via Webflow. This requires native interactions and zero custom code. A great way of adding additional text descriptions to tabs and save important space on your site.

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.

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.

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

A fun, book and page flipping interaction in Webflow. Please note that while a majority of the page designs are created with Webflow interactions there is some custom code found in the page settings to get this to work properly.

Here is a custom 3D effect for cards created in Webflow. This allows you to create a hover effect that follows the mouse for your Webflow site. It turns a static div/card and then creates a 3D transformation.

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.

A great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

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 way of adding a slider before and after scroll reveal. This was a clone from Udesly.