Discover Webflow cloneables

A unique scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

This is an interaction that displays an image on hover via a unique interaction in Webflow. Add this animated hover interaction to your Webflow site to add a dynamic interaction for your images.

A unique image slider that appears when hovering over items in Webflow. This is perfect for providing a preview of the item that the user may visit next, this could be used for portfolios, about sections, blog posts and much more. When the user hovers over a link an image appears, when the user hovers over the next element the image from the previous item slides up and the current image replaces it. This technique was created with a simple jQuery code snippet which you can find in the custom code of the page settings. You'll want to note that there's also some custom CSS which can be found via the HTML embed. This cloneable was setup to use Webflow collections and does not utilize any custom Webflow 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 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.

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.

A quick and easy way of adding a dark mode/light mode toggle to your Webflow site using native interactions. This is a perfect demonstration of how to implement dark mode/light mode toggle interactions to your Webflow site using native Webflow interactions.

A smokey button design with interactions and hover state animations.

Five different variations of an image appearing when hovering over a link, or item. In the first example when a user hovers over the item the image stays in line with the text although slightly follows the users mouse. In the second version the image follows but at a different section and with a different image dimension. In the third example the entire div has an image appear from the bottom and changes the background of the item. The following demonstrations changes the entire background of the page to an image. This demonstration and cloneable was built entirely from Webflow interactions and doesn't use any extra custom code or HTML embeds. These examples rely on the Mouse move over element for the triggers.

Three different stunning Swiper.js carousel sliders built for Webflow. The first variation contains a draggable bar, slider dots to indicate which slide is currently active and slider arrows. The second variation features a dark themed variation of the first version. The third is a larger variation of the other two. These designs are all setup for Webflow's native CMS collection so that they can tie into your preexisting CMS items. As mentioned you will need to add the custom script found in the page settings. With this Swiper.js slider you can customize the looping behavior, slides per view, the slides between groups, space between, mousewheel, the transition speed, mobile responsive break points and its actions. You'll notice that classes are associated with many variables in the code, so be sure to use those or update them to your own.

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

A fun way to have an animated, cursor following dog animation on Webflow. This is driven fully by div elements and a bit of CSS and JS to make the magic happen.

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

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 demonstration of parallax scrolling movement interaction examples within Webflow. A perfect way of understanding how to build custom parallax scrolling effects within your Webflow site.

Add a fully responsive preview of your Airtable database in Webflow

This method showcases a 11x11 grid menu animation on click. The blocks in the grid appear in a specific, staggered to create this menu effect. The staggered effect plays in the opposite direction on the menu close. There are also micro interactions applied within the menu appeared.

Here's a unique underline animation for tabs in Webflow. When you hover over a tab, an animated underline interaction is triggered. The tabbed items also have a hover over interaction in which a view magnetic button appears and follows the cursor over the hovered item.

Here's a quick and easy way to add a date picker to your Webflow site via flatpicker.js. The reason we love flatpicker.js is because it's a quick, and easy solution and is incredibly customizable. You can find flatpicker.js docs here: https://flatpickr.js.org/

Here's a way to bulid a pricing calculator based on multiple slider inputs to get an estimate/quote for your clients. This is accomplished using the native Webflow slider element and a bit of CSS to style the controls. Values are updated by the sliders as well as by entering in a number within the top input fields. This is perfect for custom pricing and quotes needed on a pricing page.

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.

Want to practice your typing speed in a game built on Webflow? Check out this unique cloneable that creates a typing speed/accuracy game 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.

A well designed centered pop up opt in modal for Webflow with premade gradients. This is a perfect way to add a pop up opt in modal to your Webflow site due to its premade gradient shadows which will make this modal window pop on any Webflow site.

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.

A very complicated, and advanced cloneable featuring hover effects for a portfolio site. This demo includes a custom, animated cursor, hover effects that change images/divs, text clipping that fills text based on the cursor location. A great example of how Webflow can create a number of different effects, all at the same time. All of this is driven via Webflow's native CMS.

Connect Webflow's native CMS to an image plotter via this cloneable. With this cloneable you can add an image plotter to highlight features, locations, items, product features and much more. The multi-reference highlight items to each main gallery image item using a simple top and left coordinate value to set the specific location of the dots on the image. Each highlight dot also leverages conditional visibility to adjust the position of the tooltip image polotter depending on the location of the dot and whether or not the values were set in CMS.

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

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 very fun way of adding a backlight effect to Youtube video embeds on your site. This currently works in Chrome and Firefox and needs a bit more tweaking to fully work in Safari. This works via native interactions and some custom code. Easy to integrate and get working on your site.

A unique iPhone mockup screen scroll animation for Webflow and perfect for portfolios and similar design elements. This cloneable features no additional custom code or HTML embeds and utilizes Webflow's native interactions to perform the unique animation. As a user scrolls down the page the images in the iPhone mockup provide a scroll interaction that appears to show the images scroll down as the page is scrolled down. Utilizing Webflow's While scrolling in view this moves the images within the iPhone mockups as the page is scrolled down. Since this is class based this works for all of the iPhone mockup images throughout the site. A simple, yet effective Webflow interaction that makes any portfolio pop.

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 unique slider that provides functionality support not found in my other sliders in Webflow. Including responsive, swipe gestures, keyboard arrows. Easy to customize simply copy and paste the slide item to add more items. Place content within the content wrapper. This slider utilizes Slick Carousel to create the slider and thus requires you to add the custom JS code found in the closing body tag.

A full screen parallax menu/navigation featuring mouse interactions.

A fully designed black and white hero section for Webflow. This Fintech inspired design features unique button designs and interactions, call to actions, review section, mega menu/navigation and much more. Everything you'd need to get started building a hero section for your homepage.

Here's a way to add random stroke backgrounds to your Webflow site via three.js and vanta.js. Each time the page is loaded the strokes are loaded randomly.

A fancy scrolling interaction to showcase your work in Webflow. This cloneable uses Webflow's native CMS and the power of Webflow interactions to create a smooth scrolling interaction in which each slide is a different section. Upon scrolling the images move in smoothly and the headline and description appear. This is a rather extensive interaction as it deals with scroll actions and scale, opacity, move based on the location of the page.

Here's a fun and unique way to add particles that follow your cursor in Webflow. Be sure to check the page settings for the custom code needed to run this properly.

Here's a way to add a background image change on link hover to Webflow. Using a simple trick to change the background image on mouse hover dynamic items list. This is all done with native Webflow capabilities without any scripts.

Easily calculate the read time of content via this responsive Webflow cloneable readtime calculotor. This is fully responsive and instantly calculates the read time of a text and/or blog post. It requires only a small bit of custom code and the rest of it is accomplished via Webflow. It offers load animations, interactions as well as a light and dark mode feature.

Here's a way to create a sticky tabs section on scroll in Webflow. When users scroll down the page each tab is then stuck to a section. Perfect for adding a dynamic effect to Webflow tabs on your Webflow site.

Here's a unique and fun button with border animations in Webflow. Initially the button looks rather basic, however with a few line animations it makes this button really pop. The lines were placed within wrappers and set the wrappers to an overflow hidden. The move animations to each line was added to control which direction the lines came in from with the different hover states. Scaling the lines doesn't allow for transform-origin to be changed on the different states, hence why the move option was used instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of a button with a position of absolute.

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

Here's a fully designed registration/sign up template for Webflow. Built with custom inputs, labels, and includes social media sign up buttons.

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.

Here's a highlight effect on text hover animation for Webflow. When a user hovers over text a highlight style animation interaction is displayed. This is perfect for a menu or other type of text with a unique underline animation on hover. Each menu item has a title and phrase. An underline appears under the title and the phrase at the same time and scales back on hover out. The phrase also moves a bit to the right on hover.

Eight different content layout designs for your Webflow site. Easily add beautifully designed content layouts to your Webflow site.

Seven different feature layout designs for Webflow. These unique designs allow you to easily add feature sections to your Webflow site. Great looking, responsive designs.

Add an Apple style keynote feature grid to your Webflow site. Video tutorial found here: https://www.youtube.com/watch?v=fAkGkF-w1gI

A dynamic pricing table with features that dynamically change the pricing for Webflow. The value of each item can be toggled based on the feature set required and the price updates dynamically based on the required features. Please note that the dynamic pricing, and other features like checkboxes are all accomplished via custom symbols and JS embeds.

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

Here's a technique to display multiple video popup modals in Webflow and have the videos pause on close. Please note that in order for this to work you'll need to utilize the custom script found in the body close tags. These are tied to the class names of the cloneable so you'll need to customize the classes if you add, remove or copy the code from the cloneable.

A well designed frequently asked questions (FAQ) cloneable design for Webflow. This provides all the interactions required for opening and closing the accordions that will fit perfectly on your Webflow site.

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

Here's a way to use native Webflow attributes to send and receive data to text fields or div/text elements. This can be useful for allowing users to contact different departments via Webflow's native forms. Please note that you'll need to add the custom code found within the body close tags within Page Settings for this method to work properly.

A unique button design in Webflow with hover over interactions. When a user hovers over the button the button fills from right to left and on hover out the fill moves from left to right creating a unique Webflow button via native interactions.

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.

A demonstration of creating moving and shrinking labels in Webflow. When a user focuses on the input field the field label moves out from the input field and above it. This method does not use Webflow interactions but a custom script found within the page settings.

A CMS driven menu slider for food related items.

Here's a way to add or remove additional form fields in Webflow. This is a great way to have added functionality to native Webflow forms.

A beautifully designed team page with image transitions on click in Webflow. Built with GSAP this creates a team page section, and relevant content on click transitions not found via native Webflow interactions. Please note that in order for this to work properly you'll need to copy the HTML embed within the Global Styles symbol as well as the custom head code and body code found within the page settings section.

A sticky, stackable cards section that stacks upon scrolling on the Webflow site.

A card interaction that displays additional information upon click in Webflow. This interaction was built entirely with Webflow's native interactions and requires no additional code. When a user clicks on the card the image reduces size and zooms out while the text information of the card appears.

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

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 very cool three.js background animation featuring fly by hills that are black and white. A unique way to add 3D depth the background of your Webflow site.

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

Here's a way to create a tabbed style slider for Webflow with unique transitions. The previous and next slider buttons are removed and each of the sliders are numbered. Upon clicking on the next number the text and images are slid in via a unique transition. Perfect for changing the way that your slider can be built and displayed within Webflow.

Here's a way of adding a unique, full screen image transition to your Webflow site via Three.js Each image loads a unique transition upon clicking them and turns the images full screen upon click.

Create a looping infinite CMS Marquee with pause on hover effect. Achieved via custom CSS.

Four separate stats sections for your Webflow site. Each of the stats sections are well designed, and unique to help show stats of your product or service on your Webflow site.

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 virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

A fun and unique green pricing table design for Webflow. This pricing table design features a large headline and a four section pricing table with a unique hover over interaction. When a user hovers over a card the card is attracted to the mouse and moves around a bit. The pricing cards feature product information as well as a primary discounted card label for a package. A great design to get your Webflow sites pricing section built out quickly.

A grid layout with parallax style effects in Webflow. This unique grid layout features a text masked headline section and a unique grid that's ready for a parallax style effect. A unique way of demonstrating images and the power of Webflow interactions.

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

An example of integrating locomotive scroll integration in Webflow

A full screen menu for Webflow with hover over interactions. This menu features all the native Webflow interactions required for building a full screen menu. When a user clicks on the hamburger button the Webflow menu slides in from the top. Each menu item includes a hover over interaction in which the cards expand and the colors turn from black to white background and the fonts also change at the same time. Closing the menu slides it back to the top of the page.

Here's a 4 column pricing page table/grid that's feature rich for Webflow. This pricing table/grid includes sticky package heading on scroll, tooltips, category and feature comparison and is also mobile ready with a tabbed version. A perfect starting point for any pricing page of a Webflow project.

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

Add a dynamic indicator to let your users know how far down the page they've scrolled via this interaction on your Webflow site.

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

Want to validate forms prior to submission in Webflow? Using this technique you'll now be able to validate form fields in Webflow prior to allow a submit using native Webflow forms. In order for this to work you'll need to add the custom code found on the Page Settings. This utilizes jqueryvalidate to validate the forms prior to submission. Jqueryvalidate offers a number of additional validation features that may relevant to your needs.

Clonable project for geotargeting website content and messaging. Based on user IP address using Geoplugin (with a yearly fee for SSL requests). This is a perfect way of limiting, or providing messaging to a subset of users based on their geo location.

Here's a full page iPhone mockup design for Webflow. A great way to add an iPhone mockup design to your site with all of the elements already designed for you.

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.

Here's a technique to add a image based grid to the background of your Webflow site that follows the mouse cursor on the page. A fun technique to adding a dynamic and layered effect with a bit of mouse cursor interaction.

Here's a way of adding a circular text with movement effect to Webflow via circulartype.js. Unfortunately the sizing is a little weird and doesn't work properly, although it does work. This includes an interaction for page load, scrolling through sections ad for page transitions.

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

Here is a way to add a countdown clock component to your Webflow site. This simple script will take your chosen date and provide a countdown for the days, hours, minutes and seconds. Perfect for a coming soon page, product release page and much more.

Just about every kind of payment method badge, icon or image you'd need for your Webflow site. This includes payment methods like PayPal, American Express, Visa, Google Pay, Apple Pay, Visa, Stripe, Mastercard. They include images with backgrounds, no backgrounds and much more.

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 unique 3D glassmorphism interaction and animation that utilizes a combination of video, Webflow interactions and Custom CSS. When a user hovers over a card the card rotates and 3D transforms based on Webflow interactions. The technique for the glassmorphism is powered by custom CSS using backdrop-filter blur and image masking. In order for this to work properly you will need to add the custom CSS code with this cloneable. Pay attention to the Webflow interaction that is powering the cards 3D transform techniques. An excellent example of using Webflow interactions, CSS and a little bit of creativity to create glassmorphism 3D cards in Webflow.

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.

Four different individual text animations created with Anime.js for Webflow. These animations each create an individual letter loading animation on load. Please note that this only works on the published site. To get this to work give a class to the text that you'd like to animate. For example, animation1. Add a span to the text and give it a class of letter. Copy the code on the settings, before body and make sure that you change the class to the one that you used in the first step.

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

Here's an example of a menu with a slide in interaction and that features a background video for the menu. A fun interaction that adds some depth and liveliness to your Webflow site.

A massive collection of 180 premade gradients that are perfect for your next Webflow project. This makes adding gradients to your Webflow site a breeze, simply copy the cloneable page with the gradients and then simply add the class to any div and you'll see the gradients added immediately. For example, you can add Winter Neva, a bluish light gradient by adding .gradient-winter-neva to your Webflow div as a subclass. In this massive pack of 180 Gradients you'll find gradients with various styles, such as angular, radial directions, and gradients with a number of different colors. The best part, these gradients can easily be modified to your own specifications as they use Webflow's native gradient functionality and all the presets have already been completed for you. Simply update the colors, direction and settings to create your own Webflow gradients.