The Top 542 Interactions Webflow cloneables

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.

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.

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

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

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.

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 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 unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.

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

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

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.

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.

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

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

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

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.

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.

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.

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

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

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.

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

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.

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

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.

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

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 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 way to achieve a 360 degree spinable book. This was built with CSS grid, responsive typography, 3D transforms and custom CSS properties.

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

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.

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.

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

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.

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.

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.

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.

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

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.

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

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.

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

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.

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.

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

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

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.

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

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.

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.

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.

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.

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

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.

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

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

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 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 unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

A bouncing, parallax effect draggable slider for Webflow. When you add this to your Webflow site you'll be able to create a dynamic, parallax style bouncing effect to your Webflow slider. The native slider is left intact so you should be able to integrate native Webflow based scroll interactions. This does not work on mobile devices. Consider Webflows native slider for mobile.

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.

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.

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.

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.

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

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 unique, fancy background hero with text masking effect over a background autoplay video.

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 frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

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.

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 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 great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

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

A great 3D card interaction for products or listings of services on your Webflow site. Upon hovering on the card the purchase link pops out and the card fully 3D transforms to follow the mouse movement. A great way of taking a static product card div and turning it fully dynamic.