The Top 542 Interactions Webflow cloneables

A fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

A way of utilizing sticky cards that stack on scroll in Webflow. Using position sticky and a scrolling into view interaction allows for this effect without any custom code.

An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.

An FAQ accordion for Webflow that includes all of the Webflow interactions to make it work. This accordion offers a simple design and is fully responsive with prebuilt interactions to make the magic happen.

Here's a demonstration of using three.js for the background of your Webflow site.

A unique stacking cards on scroll interaction in Webflow. When you scroll down the page the cards on the right side stack on top of each other. A unique interaction perfect for a SaaS or technology site. The stacking cards effect was built entirely using Webflow interactions and does not require any additional code or scripts. The effect is created by using the While scrolling into view trigger, with the use of Scale and Filter. The filter applied reduces the overall brightness of the card and the scaling is used to send the item back smaller. Overall a well designed and thought out solution for a stacking card interaction.

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

Here's a basic example of utilizing Swiper.js for a slider within your Webflow site. Swiper.js is great for adding a draggable slider with a variety of effects within Webflow.

Here's a full screen menu navigation with animations and interactions in Webflow. This is a great way to easily add a menu/navigation to your Webflow site. This was comprised of three components during the build process. First, an image wrapper with an image inside of it. Second, the blue background and third a right wrapper with the menu items inside of it. The image wrapper and right wrapper are both 50% width within the menu. The width of the blue background is 150% so it has a quicker animation as it scales in. By having separate wrappers inside of the menu wrapper the scaling effect can also apply to the image, and the blue background as well as individual animations to the menu items. The menu trigger also turns into a close icon on click and then back to the hamburger button.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

An add to cart hover button animation for Webflow. When a user hovers over the Add to Cart button a shopping cart icon slides in from the right side. This helps users understand the action taking place on the button and helps add a new level of dynamic buttons to your Webflow site.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

Add custom CMS slider with stacking and overlapping cards.

A unique product card animation on hover in Webflow. When a user hovers over a card the image shifts down, and a border appears with an animation, there's also a description of the card that appears as well. This animation effect was built entirely with Webflow's native interactions.

A unique slider pricing calculator that updates the pricing table based on the slider options in Webflow. This is a great way to customize your pricing page tailored to the users unique features that dictate your pricing for your Webflow site and service.

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

A unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.

Looking to create a Quiz in Webflow driven by your CMS? Here's a technique for creating that. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

A fun way of adding a text color changing effect to a headline or other piece of text in Webflow. This technique uses Webflow's native interactions to achieve a color changing text effect in Webflow. This demonstration as two different methods, one which each text changes colors at a time and the second in which all texts change color and then revert back and loop again.

A unique interaction in which images pop up an trail the mouse cursor when moved on the page. A fun technique that could be implemented a number of ways to create various dynamic effects to your Webflow site.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

A full set of beautifully designed interactions in Webflow for your projects. These interactions include buttons, play buttons, search, toggles, hamburger buttons, toggles, social sharing and much more.

Here's a way to add magnetic images to links on Webflow. The images appear as you hover over the links and stick to the mouse and overlay the text over the image. This method relies strictly on Webflow interactions and doesn't require any custom code or HTML embeds. The interactions use a combination of hide/show, scale, opacity text color and border color to work properly.

Here's an easy way to create a masked video in text in Webflow. No custom code is required. This was created with an SVG file and added interactions to zoom in while scrolling.

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

Here's how you can create a custom cursor to your Webflow site.

A demonstration of how to add an infinity cycle text header rotation with 3D style changes in Webflow. This technique uses native Webflow interactions and does not require any 3rd party scripts or plugins to work properly.

Add a CMS driven draggable slider with smoothing to your Webflow site. This slider offers the ability to slide with a trackpad and also has mobile smoothing. There's a small webkit code that removes the scrollbar as well.

Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

Here's a unique parallax blur scrolling animation that's perfect for portfolio sections in Webflow. This parallax blur scrolling animation effect adds the image that's being scrolled to the background with a blur filter effect. All of this is achieved via native Webflow interactions.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

A set of various language switcher elements designed for your Webflow site. If you use translation on your site these handy language switcher elements will come in handy. There are 14 different designs with necessary interactions to make them easy to copy and paste into your Webflow site. Nearly every kind of design you could think of to make this easy to implement.

Here's a way to add a parallax slider to your Webflow site. You can navigate the slider via dragging or using your arrow keys.

A stunning and easy to implement Swiper.js draggable slider created for Webflow. This slider is completely draggable for both desktop and mobile devices, when the next slide is triggered there's a slide in feature that is powered by Webflow interactions. This makes the next card appear to slide in upon being visible. Swiper.js powers the slider and allows for custom functionality such as speed, looping, breakpoints and much more. Keep in mind that this utilizes data attributes to work properly so you will need to update each slides data attributes in order for the Swiper.js functionality to work properly.

A fun crystal ball hover styled button for Webflow. This was designed entirely with native Webflow interactions and does not use any type of custom code.

A CMS driven 3d parallax effect for photos and portfolios using classes by Finsweet.

A smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

A wacky and fun button animation in which emoji's explode after clicking a button in Webflow. This effect was created using custom JS so be sure to add the code found in the page settings to your site in order for it to work properly. While this could be created natively with Webflow interactions a simple JS library helps create this effect faster and easier.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

A unique way to display and reveal a thumbnail image preview on hover.

A well designed starter dropdown navigation menu with hover over for Webflow. This consists of clear class names, 100% native interactions and basic dropdown triggers. It's also mobile friendly and responsive design.

Custom cursor particles effect for Webflow. When a user moves his mouse over the page custom particles are shown trailing the mouse. A fun, dynamic interaction that adds some animation and life to your Webflow site. This is accomplished via Sketch.js

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

A unique way of showcasing your logo front and center and have it move up on page scroll in Webflow. This adds a fun dynamic element to your Webflow site and draws the users attention in. This interaction was created entirely from Webflow's native interactions using the While page is scrolling functionality and size, move, scale, opacity and more. This requires no additional custom code and can be cloned and setup quickly.

Here's a product card with image zoom on hover for Webflow. When the user hovers over the product image it scales up and zooms so the user can see more information about the physical product. This was accomplished by placing the image div inside of a wrapper with an overflow hidden. When the user hovers over the image wrapper the image div scales up to double the size. Then with the mouse over element interaction the image moves in different directions when hovering over the image wrapper. This allows the user to hover around the image to see different parts.

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

A unique vertical navbar with a page scroll progress bar for Webflow. This vertical navbar features a progress bar that indicates how far down the page the user is and was created entirely with Webflow interactions. Note there is some CSS however this controls hiding the browsers default scroll bar. Otherwise this was built and created entirely with Webflow interactions. Taking advantage of While page is scrolling a div is moved down the page based on the percentage of the page that the user has scrolled down. This is perfect for storytelling or blog posts or pages with a large amount of information. A wonderful vertical menu solution for Webflow.

A full screen animated navigation with hover interactions and slide in animations.

Here's a way to utilize a tab change interaction for your Webflow sites. Upon clicking the tab the elements animate and the tab changes. Note that any interactions happening within the tab page much start after any interactions within the tab link are finished. Otherwise the tab component will cut off the animation resulting in nothing happening within the tab pane itself.

A sun circle animation that grows based on the page scroll in Webflow. This entire animation is built natively with Webflow interactions and requires no custom code. A great example of how you can use Webflow's native interactions to build in depth, multi stage animations based on page scrolling.

Create a seamless page transition for your pages in Webflow. Using just a small snippet of custom code you can allow the page time to complete an exit transition with an intro transition on the new page. Set your links to preload your pages for even faster performance.

Here is a 3D info card animation on hover in Webflow. When you hover over the card an image panel rotates in horizontally to reveal the content. The effect was achieved by adding a div block with a child perspective applied to it. Then another div blcok was added inside of the 3D wrapper. With the interactions this div block was rotated from 90 degrees to 0 degrees on the X axis. Since the wrapper has a child perspective it creates a 3D effect for the panel as it comes in. It also has a reveal from top to bottom as the panel comes in.

A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.

Here are two different examples of logo animations in Webflow. Great inspiration for ways that you could animation your Webflow site logo with native interactions.

Here's a beautifully designed rotating testimonial slider in Webflow. A great way to build trust with your prospective clients. This testimonial component will auto slide between your testimonials with a smooth transitioning effect.

A GSAP CMS horizontal scroll effect that utilizes a combination of Webflow's CMS, Webflow interactions and GSAP to allow for horizontal scrolling. This allows for distance based on the number of cards within each section and if not enough cards are present in the section the section will still appear without having the horizontal scroll effect. Using ScrollTrigger you can customize the number of items viewable upon load and the scroll speed between each slide. This mobile and responsive friendly solution allows you to customize the number of items viewable in each resolution. The individual cards can be powered by Webflow CMS allowing for truly dynamic Webflow sites and designs without a major refactoring of any code in order for it to work.

Power up your Webflow tabs through a timed, auto-rotating tabs feature. This is perfect to add emphasis to your Webflow tabs and more specifically demos, explainers, testimonials and just about everything else you can think of. This is a super simple script that adds auto rotation to Webflows native tabs.

A unique way of using a CMS to create an interactive responsive map. You can watch the full tutorial here: https://www.youtube.com/watch?v=VqSEvzzLoVQ

A magnetic call to action button featuring rotating text and a trailing custom cursor in Webflow. Circletype.js was used for the circular text rotating animation. You can change the text and the circle radius will automatically recalculate.

An interactive sky background for your Webflow site using three.js and vanta.js. When a user interacts with the page it feels like you're flying through a set of clouds. A perfect way of adding depth and interactive nature to your Webflow site.

Add a unique circular slider to your Webflow hero. This demo showcases a circular slider with animated panels via the background. These panels were created in Adobe After Effects and triggered via a slider element within Webflow. The main slider is also linked to a secondary slider that showcases the text. The sliders were then linked together via custom code.

Add a flock of interactive flying birds to your Webflow site via three.js and vanta.js. A wonderful way of adding an interactive background of 3D birds flying to your Webflow site. You can edit the following sections of the custom code for further refinement. You can edit: backgroundColor: 0xffffff, color1: 0xf70707, color2: 0xff5a00, birdSize: 0.90, wingSpan: 29.00, speedLimit: 4.00, separation: 22.00, alignment: 21.00, cohesion: 21.00, backgroundAlpha: 0.93

A drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

Here's a way of creating a glowing, 3D hover card effect in Webflow. When a user hovers over the card the card creates a 3D effect with a gradient outline, another interaction is added to show a 3D rotating reflection. All of this was created with Webflow interactions and zero custom code.

A 3D rotating cube that can be customized with images or videos, which can add a nice dynamic level for your features section. The effects are achieved via Webflows native interactions and transforms.

A custom CMS product slider for your Webflow ecommerce site. This custom CMS slider offers more functionality and a different approach than standard sliders. Product images are referenced by the URLs o it can be used to populate images from other sources rather than Webflow directly. Each slide offers a different transition as a well as different color options per product. Perfect for sites with different colors in per product. Be sure to add the custom CSS and JS found in the Page Settings body/heading sections for this to work properly.

No javascript, no interactions, easy CSS scrolling marquees for your Webflow site. This is the easiest way to add marquees to your Webflow site without ANY confusing interactions or complicated JS solutions. Please note that you must have an even number of elements within your marquees for them to function properly and not skip around. The CSS for each marquee is included inside of the container and denoted with an emoji.

An infinite scroll marquee on hover interaction for Webflow. When a user hovers over a link an infinite scroll marquee animation is displayed. This is perfect for a menu or navbar within Webflow in which you'd like to add extra emphasis and animation design to. This was built entirely from Webflow's native interactions and requires no custom code.

A unique tinder style swiping module for Webflow. This demonstration uses fish and a tinder like design to like, or dislike fish. This was built using Webflow CMS and Jetboost for the like feature.

Want to add smooth scrolling to your Webflow site? With this cloneable you'll be able to add smooth scrolling via luxy.js. Adding smooth scrolling doesn't need to be complicated and there are plenty of options to achieve this inertia type scroll effect although Luxy.js provides a great way to achieve this.

Here's a way of adding a flipping card animation to cards on your site. This component can be used for a number of scenarios and allows for additional information to be displayed on your cards without taking up important site real estate.

A fun way of adding an interactive halo background effect to your Webflow site using the power of Three.js and Vanta.js.

Looking to easily add buttons to your Webflow site? Here are 16 different button designs with prebuilt hover state interactions.

A unique card hover animation in Webflow that creates a 3D parallax style interaction. A great example of what can be built using Webflow's native interactions. When hovering over the card a two layer parallax effect is shown with the top transparent purple layer separating from the bottom image layer. Both layers seem to transform in a 3D space while the Name and Title moves at a different rate than the other two cards.

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

An example of a fixed slogan/text that changes when scrolling through different sections on a Webflow site. The embedded code is compatible with all major browsers, including some variations of Internet Explorer and Edge.

A unique horizontal scrolling technique created for Webflow and built using a combination of Webflow interactions, custom CSS code and jQuery. This allows you to add horizontal scrolling to your Webflow site, this cloneable also features a page loader and a mouse cursor interaction. As you scroll down the page you'll notice the horizontal slider that also features parallax style effects, there's a unique text outline stroke effect. Each section is driven by Webflow CMS which allows you to easily add or remove pages based on your needs and requirements. This was built to work on both mobile and desktop devices making it responsive for any size browser.

Here's a rebuild of Stripes mega menu design in Webflow. Add a unique mega menu design and navbar to your site inspired by Stripe's mega menu.

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

Are you looking to use Webflow tabs with a rich text CMS field? By default Webflow doesn't allow rich text fields to be placed in the tabs by default. This technique uses a bit of JavaScript so if you change the classes be sure to update the code within the page settings. The arrows in this demonstration are from Font Awesome and the colors can also be updated in the page settings.

Here's a way of creating structured CMS pop up modal for your CMS items in Webflow.

A simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

Add a 3D parallax background animation effect with mouse interactions to your Webflow site. A fun way of adding dimension to your otherwise flat Webflow site using the power of parallax.

A simple, yet complex image slider with a transition effect. This utilizes Splide.js, Anime.js custom JS for the link delay.

Here's a way to add a simple horizontal scrolling cards section to your Webflow site. The cards are designed for horizontal scrolling on desktop and tablets and vertical stacking on mobile. Since this was designed using Flexbox, you can add/remove cards and the scroll will still work. Although you'll likely want to resize the scroll track if you use a lot of cards. Each card can have a background video added to the card for a neat reveal on hover effect.

A subtle, yet clean gradient moving background interaction created for Webflow. This cloneable was built with only Webflow native interactions and does not require any additional code or HTML embeds. The effect was created by adding 4 different circle gradients to a gradient wrapper. The moving gradients uses Webflow interactions page load trigger and manipulates the scale of each item over a timeframe. Essentially each item grows and contracts at different intervals creating the appearance of a moving gradient background that isn't overwhelming.

An amazing 3D scroll animation that rotates a tablet towards the viewer on scrolling down. This can be used for both static images or animated videos and creates a wonderful depth perspective on page scroll by users.

Here's a way to add a dropped in text underline on hover in Webflow. When you hover over the multiple lines of text an underline interaction is triggered and the underline appears over the text.

Here's a technique to fade text in and out on page scroll with various sections and different texts in Webflow.

A copy and paste GDPR compliant cookie consent widget. This Webflow cloneable features a pre-made and GDPR compliant cookie consent widget perfect for your Webflow site. This method stops all scripts from loading, requires no javascript editing and utilizes Webflow's data attributes and works with Webflow interactions. You can create multiple options for the levels of cookie consents and this cloneable comes with 5 different variations of the cookie consent, one that utilizes Webflow interactions. This is a complete solution to allow you to properly validate your users cookie experience based on GDPR requirements.

A way of creating a stacking testimonial card section in Webflow on scroll. As the user scrolls down the page testimonial cards are stacked on top of one another. This technique was built primarily with Webflow interactions although does use a HTML CSS embed for the numbers on the card. You can remove this if you don't plan on using the outlined numbers found in this demonstration.

A fully native dark-mode toggle button to convert your Webflow site into dark mode or light mode at the switch of a button. This technique utilizes Webflow's native interactions and the Filter, BG color, text color and border color functionality.

A 3D flipping cards interaction perfect for adding additional information to Webflow cards utilizing Webflow interactions. When a user clicks on the + sign of a card the card flips over to showcase additional information about the product. This cloneable features no additional custom code and was created using Webflow interactions. Using mouse click the card flips 180 degrees via the Y axis. This is accomplished using Z index and 3D transforms using the backface functionality. A simple, yet sophisticated flipping card interaction that's perfect for any Webflow site.

An automatic logo marquee created with Webflow interactions. This cloneable allows you to easily add an infinite logo marquee/scrollable to your Webflow site. This relies on Webflow interactions and can be customized to your specifications. Simply adjust the logos and then update the Webflow interaction based on your needs and the number of logos that you have. You can also adjust the speed at which this works by updating the duration time from 30s to your own choosing within the Webflow interaction.

Here's a way to achieve a full view experience on scroll for different sections on your site. Essentially this is a way to achieve snap on scroll between sections with a pagination to indicate which section the viewer is viewing. There is code added to the page so be sure to add that to your site as well. This will not work in preview and will only work on the published site.

Here's a wonderful parallax card animation on mouse moving/hover states in Webflow. This effect uses a gradient overlay that moves with the mouse on hover, and the border moves in the opposite direction of the mouse while hovering. The text moves and rotates left and right with the mouse movements. This effect was achieved by placing the gradient overlay and border within the card wrapper. The text was placed in the bottom right of the border div using flexbox. Then, interactions were added via the mouse move over element and the elements move and rotate on the x and y axis when the user moves over the card wrapper.