Discover Webflow cloneables

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.

A full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

Here's a way of utilizing data/information from Google sheets within your Webflow site using the Javascript v4 API. This allows you to maintain the design of your site within Webflow but use Google sheets as the CMS/backend of the information on your site. Please note that this does not work on the demo on this page but will load when viewing the page itself. You will need to generate your own API key and the google sheet should be the public link of the sheet used in this project demonstration.

Here's a wonderfully designed mega menu navigation with dropdowns for Webflow. This mega menu is perfect to get your navigation built quickly for your Webflow site. Featuring multiple different dropdown styles, perfect for any Webflow project.

Here's a horizontal scrolling technique with a progress bar and pop up navigation for Webflow. A perfect example of how to add horizontal scrolling to your Webflow site with a progress bar indicating how far you've scrolled.

An extensive Webflow & Figma wireframe UI kit based on the Sprkl framework and full of complete components, blocks and sections to create unique designs. This UI kit features 2 menus/navbars, 2 hero sections, 4 different feature sections, 2 blog posts, 3 testimonial sections with sliders, a clients list area, form fields, accordion, 3 footers, 2 pricing tables, 1 call to action and 3 team sections. There's also a full styleguide section which includes H tags, individual text styles for pagaraph, text blocks, text links, block quotes. There are individual text styles, color swatches. This is a great starter wireframe kit to start building and creating in Webflow faster.

Here's a way to transform text with Webflow without using any SVGs or custom code. This text effect is accomplished with text & divs and mixing those with some move and rotate transforms with the overflow property. A unique approach to creating vibrant text effects within Webflow.

A fun interactive JS canvas effect that makes the background feel like colorful lava. Keep in mind that this effect uses only custom code which you'll find via the HTML embeds and the custom code section of the page.

Here are 8 navigation and menu designs perfect for your Webflow site. Various layouts all with responsive mobile friendly designs ready to go.

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 template on how to use Auth0 and Webflow to create gated client-side content.

A light interactive Chrome mockup browser window created in Webflow. This mockup window features a number of unique native Webflow features to build a fully interactive Chrome mockup window for your Webflow site. A perfect way to demonstrate product images, product demonstrations and more.

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

A beautifully designed, multi-step custom onboarding form perfect for your SaaS, web design or site which requires a multi-step form. This is a complete onboarding form page design that allows for multi-step progress via a bit of Javascript. You will find the necessary JS and CSS files within the pages custom code settings. One set of code allows the form to use the arrows for the next and previous form pages. This form also features a unique range slider which was used for the date. This can be customized to your own requirements but is a well designed, multi-step onboarding form that allows you to break down long questionairres or onboarding forms into small, bite size pieces.

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

A slick split hero slider design with unique slider transitions that rotate both half of the pages in different directions upon each slide. Perfect for a unique hero section in Webflow that allows for an eye catching and dynamic hero slider section.

A pop up modal that is triggered by a toggle on the CMS collection item while also keeping the default link to the collection item on the page. The pop up modal will disable body scroll and enable when closed.

A simple CSS snap scrolling cloneable that allows you to easily add snap scrolling via CSS to your Webflow sites. This utilizes CSS and you can find this in the cloneables custom code page settings. With this custom code you can target the n parent and other nth categories to customize the snap scrolling functionality. You can add easing, the duration for the scroll snapping, the height of the items and much more. Easily add snap scrolling to your site via this snipped and skip bloated 3rd party JS libraries.

Here's a unique team, about card hover animation for Webflow. When someone hovers over the profile image the image zooms out, and the name, details and a button is then displayed.

Here's a wonderfully designed full section testimonial slider for Webflow. Each slide has it's own transitions as well as custom slider arrows using Webflow's native slider. Perfect for adding a testimonial section to your Webflow site.

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.

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.

Easily add a countdown or launch timer to Webflow. With this you can easily add this into your own project. The numbers have separate IDs for Hours, days, Minutes and of course Seconds. To change the time simply go into the Custom code and change the date. The date is in the following format, "2018-09-28-00"

A unique interaction in which a different image is shown based on the cursor location on the Webflow site. This effect was created entirely from Webflow's native interactions and requires no custom code. A great example of thinking outside of the box, integrating the use of a grid design to trigger the hidden images based on mouse over trigger events.

An amazing full page multi image slider for Webflow. This slider is built with great interactions and transitions and loads multiple images per slide. Perfect for portfolios, architecture images and much more.

Here's a way to add zoom in images on click via a native Webflow interaction. Custom code is involved to disable/enable the body scroll only. Be sure to copy the custom code for the body scroll toggle on modal pop up. This is perfect for showcasing a product where zoom-in is required to view the close up details of that product. The interaction works only for desktop and on mobile it will only be normal image without the zoom in effect.

Reveal an image on initial hover, on second hover remove the image from the card. Difficult to achieve as you need to sequence the triggers and hide elements to control the 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 way to add an interactive, draggable 3D model to your Webflow site. Find the full video tutorial here: https://www.youtube.com/watch?v=M0Xd4wGfn_E

Here's a way of creating an autocomplete style search input in Webflow via a small JS snippet. This is perfect for giving your users autosuggestions as they search based on items within your native Webflow CMS list. Be sure to add the custom code found within the closing body tags of the Page Settings for this to work properly.

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.

A fun popping credit card hover interaction in Webflow. When a user hovers over the credit card it bounces up and then back down using completely native Webflow interactions.

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

Here's a way to utilize Lottie files with a scroll into view interaction and position sticky. A great way to add dynamic animations to your site with animations on scroll.

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

A style guide framework built in Webflow so that you can easily build and create a style guide for your projects/clients in Webflow. This framework lays out all the elements, tools, components and resources used to develop them. This is based on the client-first methodology by Finsweet.

Here's a demonstration of a call to action card with a hover animation in Webflow. The hover animation appears at an angle when the user hovers over the card. This is a great way of indicating that the card can be clicked on and visit another page. To create this animation a card wrapper is created with all the elements in it. Then a card wrapper was set to relative and a div block was placed inside of the card wrapper and set the position to absolute and 50% width and 120% height so that it could be angled without losing the height at the top. Then this div was moved 100% to the right from the card. With interactions the div was then rotated -10 degrees. An arrow as then placed in the slanted div block and rotated the arrow 10 degrees to offset the -10 degree angle. The border color also changes on hover.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

A CMS driven menu slider for food related items.

Here's a way to block internet explorer visitors from your Webflow site and provides a module that encourages them to download a more popular and up to date browser.

Using Mixitup to combine CMS lists into a single list and add both sorting and filtering to your Webflow site.

Turn your site into an interactive black hole with this unique Webflow cloneable. Please note that this entire example relies on scripts and code so you'll need to add the code found on the page and within the page settings for this to work properly.

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

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

Here's a way to have Webflow's native slider adjust to the height of the contents within each slide. This allows you to dynamically change the size of the slider based on the height of each slides content rather than having the content adjust to the height of the entire slide module.

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

A full screen parallax scrolling interaction in which different sections are folded in on Webflow. This also has a subtle blurring effect to add extra design to the scroll interaction. This is built entirely from native Webflow interactions without any extra custom code or CSS.

Here is a simple branding style guide that you can use for your Webflow projects and clients sites. This helps your clients, or yourself, create branding guidelines that will be used for all marketing and site materials.

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

Here's a unique, 3D mouse interaction in Webflow. In this example a 3D box spins based on the mouse within the viewport of the Webflow site. It's a simple 3D box that rotates around the center of the viewport as the mouse is moved around.

Enjoy Webflow's loading screen? Now you can add Webflow's circular preloader screen to your Webflow site. This preloader was built using Webflow's native interactions as a demonstration of what you can build with Webflow.

Easily add an Instagram feed to your Webflow site with these premade Instagram feed designs. Twelve different Instagram feed design components allow you to easily add your latest Instagram posts to your Webflow site. Keep in mind that these are simply the design components and do not include the code to work properly. You'll either need to use a 3rd party tool or manually add your instagram posts yourself. These Instagram feed designs feature a variety of different styles from masonry grids to stacked and Instagram style cards.

A simple pricing table with a three column design for Webflow. This simple pricing table features a blue design with gradients, animated circles background, and a primary pricing package with features options.

Using a combination of lottie, svg and Webflow interactions you can add this head that follows the cursor and mouse on your site.

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.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

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 unique javascript powered Webflow interaction in which images change on items in viewport and a clicking sound is triggered for each new item that's centered in the viewport. As mentioned this utilizes a custom javascript which is found in the pages custom code section. This script allows you to utilize Webflow's native CMS to create a list of text items and associated images with each CMS item. As the user scrolls down the list of text items, the items that are centered in view become highlighted white, the primary CMS image is shown and a clicking sound is played. A unique and fun way of adding a little bit of JS to your site to create unique, and effective Webflow interactions.

Here's a way to showcase several different slides transitioning per click. This is achieved via micro interactions for the previous and next buttons. The interaction for the arrows was created in After Effects and custom code was utilized to trigger multiple slide changes at once.

A dark themed slider for Webflow created using Spide.js. Splide is a lightweight, accessible and more importantly flexible slider written with TypeScript. This requires no dependencies and has no Lighthouse errors. In order to get this to work you'll need to include the CSS stylesheet and JS found in the Page Settings custom code section.

A free cloneable fashion site hero section, perfect for a website or portfolio section. This was inspired by a Dribble and to test out the authors expertise in Webflow. Initially starting the design in Figma, and then translating it to Webflow. For the interactions the author utilized Class Adder via Finsweet and for the text animations utilized a javascript library provided by Timothy Ricks.

Here's a way to add a simple MP3 audio player that hides the browsers default audio controls and works seamlessly with Webflow's CMS collections. This does require some custom code in order for this to work and you will need to host your MP3 files externally as Webflow doesn't allow MP3 filetypes. Be sure to add the custom code found within the head and body tags within the Page Settings.

A unique way of adding a social share button to your Webflow site. When a user hovers over the button the social sites sharing icons are shown. This method allows you to maximize space on your site and offer a unique approach to social sharing your Webflow content.

A stunning membership pricing table perfect for your Webflow site. This pricing table is based on a revised Flowbase design with unique hover interactions, removed/cleaned up class names, updated page copy, new font sizes and memberstack integration. This utilizes an orange and dark blue color scheme, 3 column pricing table with a header.

Here's a great project that shows all of Google's material color palette in an easy copy and paste method. Perfect for building color palettes for your site or finding inspiration for colors to utilize in your Webflow site.

Common elements found on mobile payment screens. 45 different variations that include just about every type of mobile payment layout you'll need.

This creates a 3D folding technique to a Webflow page on scroll down. Perfect for creating some 3D depth to your Webflow site and adding unique interactions and animations.

A perfect way of adding login and pop up modals to your Webflow site. These sign up and log in modal windows are well designed with custom form inputs, buttons and open/close interactions.

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

A method to create more dynamic and interactive experience by allowing your users to view a simple cursor animation powered by GSAP and Cuberto Mouse Follower. This utilizes custom code so you'll want to make sure you check the pages custom code section for stylesheet and JS code. This combines the power of GSAP and mouse-follower.min.js to create a smooth mouse following animation. With this you can modify the MouseFollower scripts speed, skewing and skewingText functionality to your specifications. Unlock the power of GSAP powered dynamic site elements for your Webflow site today.

A fun way of creating a 3D animated menu in Webflow. Creating a 3D perspective effect when expanding the hamburger menu. This is a simple, yet effective way, to break out of the typical menu design.

Another beautifully designed, full page custom CMS Webflow slider. This custom Webflow CMS native slider uses custom JS with zero dependencies. It does offer basic responsiveness but may need to be customized based on your own specifications. Please note you will need to add the custom JS code found within the body section of Page Settings for this to work properly.

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

Here's a way to add an animated number counter on load in Webflow. Now you can add a number counter that counts up on your Webflow sites. To accomplish this you'll need to add a class to the number you want to animate. Copy and paste the code in the Settings -> Before body tag. Change the name of the class that you created for the number. Finally, modify the parameters for it to work. The parameters that can be modified are start, end, duration, delay, true, repeat, decimals, currency and the separator. Please keep in mind that this will only show on the published site and not within Webflow editor.

A native Webflow CMS driven slider that uses Splide.js to create unique next/previous buttons and transitions. Splide.js is a popular slider alternative that many Webflow designers use to customize their Webflow sliders beyond the capabilities offered via the standard slider functionality. Be sure to add the custom code found in the page settings for this to work properly.

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

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

Looking to add animated play buttons to your Webflow site videos or other media? Here are a few different variations of animated play buttons. One variation repeats the play animated button, and the other animates on the hover over state. All of these are accomplished via Webflow interactions.

A simple to implement neon glow text effect for Webflow.

Adding and playing audio on Webflow can be difficult. Here's a way to have as many different audio files as you want which will play/pause every time you click a button. Please note that this only works on the published site and not the builder. Add an embed block on your project with as many audio tags as you want. You have to use the unique id for each one. For example, <audio id="player1" loop src"your-song.mp3"></audio> The second one needs to be labeled with id player2. Add a button for each audio tag with the unique element ID of the previous items. Copy the code within the before body tag with the ids of the buttons that you added.

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 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 3D looping card animation built with zero code on Webflow. This is perfect for a unique way to display features, services, images and more on a site. This infinite looping card animation continues endlessly and provides a fun and unique interaction animation that adds a dynamic flair to your Webflow site.

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.

A unique gradient glowing text effect for Webflow with unique hover interactions. Playing with backdrop filters, SVG clip path, and linear gradients you can now add a unique glowing text effect to your Webflow projects. Just hover over the image to reveal the animation. Be sure to add the custom HTML embed found on the cloneable to ensure that this works properly.

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.

An inclined, horizontal smooth scroll portfolio section created with the power of Webflow interactions. This technique uses no custom code such as Javascript or CSS to implement on your site. Instead this utilizes Webflow's native interactions taking advantage of the While scrolling in view. As the page is scrolled down the interaction moves the cards from right to left. The incline is achieved by utilizing 3D transforms on the cards parent div. Each card has a unique hover effect in which the image moves on hovering of each card. This cloneable is perfect for a portfolio section, features section or much more.

Here's a way to utilize a URL query parameter to trigger different styles, titles and more in Webflow. In this example adding a custom URL query parameter and some custom script you can link to a FAQ page that then updates the page title, color and the topic based on the query parameter you select. This allows for pages to be "dynamic" and linking to pages with unique attributes even though the content of that page is the same.

A fully designed, minimal black and white footer with navigation effects.

An interactive dark corner opt in modal for Webflow with interactions for close. Easily add a corner style, email opt in pop up modal to your Webflow site that includes all necessary interactions for closing the modal.

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

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

Text reveals is one of the most popular animations on the web today. This demonstrates how to achieve text reveals from different locations in Webflow. It's built using a custom script so be sure to check out the custom code section in Page Settings to ensure you have the proper scripts for the text reveal examples you want to achieve.

A fullscreen photo accordion with hover over interactions for Webflow. This Webflow cloneable features a unique full screen accordion powered by Webflow's native CMS system. When a user hovers over each card the card expands to show a larger image and detailed information about the accordion. While a majority of the effects were created with Webflow's native interactions there is some custom code that needs to be applied.

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.

Five different styles of animated and interactive social media share buttons for Webflow.

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.

Quality FAQ accordions designed and ready to be cloned for Webflow. Three variations of FAQ Accordions with predesigned Webflow interactions with modern design aesthetics. The first variation features large expandable cards with drop shadows and card highlighting all built with Webflow interactions. When selecting the card the arrow icon changes direction and becomes blue, the card also features an outline to let you know that it's been expanded. The second variation features tabs for extra FAQs and to help split your FAQ up by topics. This is a great way to feature a ton of FAQ questions on your page without taking up valuable real estate. The third variation is a grid form that also allows you to feature more questions in a smaller space, although the limited space means that large FAQs may not be ideal for this FAQ accordion.

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