Discover Webflow cloneables

Perfect for a services or overview page on a Webflow site. This progress bar indicates where you've scrolled through and which content you're currently viewing. The progress bar was created to scroll to the dynamic CMS collection blocks, typically this is not possible with Webflow since collections can't have anchor links. This was resolved via a nice hack by assigning the ID to the collection classes through an embed and then converting the progress bar links to anchor links so that you can scroll through the various content naturally.

Here are quite a few, well designed UI layouts for video cards and elements for video sections. You'll find hero sections, grids for video blogs, play button animations, and pop-up modals for videos for your Webflow site.

A unique way of erasing content via a hover over effect with your mouse. Also includes a touchable version for tablets. Be sure to add the custom code to your site to ensure that the black overlay is properly shown.

A template on how to use Auth0 and Webflow to create gated client-side content.

A massive grid that moves objects into view as the mouse moves into the viewport. This is perfect for large product pages, portfolio items and much more in which you want to add a dynamic and interactive grid to your Webflow site. This demonstration uses a combination of Symbols/components and Webflow's mouse move in viewport interactions to generate a large grid that can be navigated by the users mouse. As the user hovers over the image or item card the image expands. All powered without any custom code and using Webflow's interactions and symbols/components.

Here's a unique 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 testimonial slider animation for your Webflow site. Be sure to clone this so that the transition interactions are created for you without the hassle of recreating them.

Here are four different text reveal animations on scroll interactions in Webflow. These designs all use custom code via HTML embeds. The four techniques include classic text review on scroll, growing circle mask on scroll, and text in from left and right on scroll.

Here's a unique way of adding count up odometers to your Webflow site via Hubspots odometer library. This cloneable includes several features, count up by 1 in a fixed interval, trigger odometer via GSAP Scrolltrigger, currency options, interval increase by own value, interval increment with a randomly generated number in a range, show numbers on a button click and a tutorial of how to make it work.

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 demonstration of a spiral galaxy via three.js in Webflow with a GUI control panel. In this example you're able to manipulate the spiral galaxy animation and customize the settings. A great way of testing/playing with this three.js technique to find the best settings for your spiral galaxy.

Here's an easy way to implement a Webflow form to Mailchimp. Everything in this cloneable is done for you so that you can easily add your own Mailchimp connection to Webflow's native forms. Simply update the Action URL in your Embed form.

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.

Here's a way to create a CMS driven slider with a lightbox and video modal in Webflow. This slider utilizes Slick slider for the slider effects. Please note that this uses custom code of both CSS and script for the slider.

Here's a unique test/experiment to create an advanced LED display hover effect in Webflow. This is a great demonstration of what you can build with Webflow interactions and may lead to some. inspiration for future Webflow project builds.

Here's a way of adding GSAP's motionpath technique using Scrolltrigger and Motionpath in Webflow. As a user scrolls down the page an animation follows a wavy path. Please note in order to get this to work you'll need to add the custom code found. in the closing body tag as well as the custom HTML embed found near the image file.

Want to build a multi step form in Webflow? This is a way to build a multi-step form in Webflow. By default creating a form you're limited to only a single form, using this method you can create a multi step contact form via a native Webflow slider.

This is absolutely wild, this is a demonstration of Civilization 6 built with Webflow. This cloneable features 12,400 elements, 1,800 styles, 1,200 assets, and 400 unique interactions. This demonstration shows the possibilities of what can be created with Webflow. The game features all 46 leaders along with their individual soundtracks and nearly every feature of the game. This project comes in at a whopping 124 GB. A true testament of what you can create with Webflow. With this cloneable you can dive in and see exactly how it was built. What's most impressive is a majority of the site is powered by Webflow's native interactions, there are is som additional code but the code is very limited for a project this large and with this many different interactions. Be sure to take a look as you don't want to miss it.

Here's an advanced reveal image on hover interaction tied to Webflow's native CMS system. This is 100% Webflow native CMS powered using a little bit of jQuery. It's fully responsive with fluid responsiveness based on Finsweet client-first framework. The interaction is used to showcase a preview image from the portfolio CMS, but can be used in a number of different ways. For example you could set it as a values section, gallery section and much more. Be sure to copy the section-portfolio and global styles symbol as well as the global elements symbol. Copy the code in the before body tag and you are all set.

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.

A demonstration of creating a reflecting WebGL three.js cube in Webflow. This creates a reflecting 3D cube that's interactive when clicked and dragged creating a 3D style effect. Moving the mouse on the site moves the cube to different areas of the page.

A demonstration of using Sketch.js for a background interaction within Webflow. Using sketch.js the background of your Webflow site becomes a drawing canvas in which users can move their mouse and it creates a design on the background of the Webflow site.

A unique pricing table with tabs to rotate between different packages in Webflow. This pricing table offers a unique design pricing packages that utilizes a tab style pricing table to change between different pricing packages. The pricing table defaults to the cheapest tier, and the more expensive plans are hidden behind a table style button. Featuring 3 different pricing packages and unique transitions between each package. This pricing table features a large header, three packages, and unique rounded design.

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.

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

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

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

Here's a beautifully designed custom onboarding form to collect/update member information at any time. This could be used for onboarding, profile updating, account setup and much more.

This is a styleguide combination of the Wizardry system and Finsweets Client first methodology. The Wizardry system is an em-based fluid scaling system that is combined with the first class structure and naming conventions of the client first class naming structure and conventions. The main area where the two systems are combined is in sticking with REM units for the small text elements so that on desktop they don't end up too small on low resolution screens. The design also has a mockup at 1440px and in the template the body font size is set to 1.111vw, which is equivelent to 16px for simple px to em conversion.

Another way of adding unique interactions and animations to the menu loading of your navbar. This demo showcases a grid menu animation on click. The menu wrapper consists of 2 grids, one 3x3 and another smaller 4x8 nested grid on the lower left corner. The panels scale from the bottom to the top and left to the right on click. The text also appears staggered motion from bottom to top. On close the text fades out and moves back down, and the menu panels scale back to 0 in a staggered way.

A fast and easy way to build your own styleguide in Webflow. This starter style guide is organized in one page and setup with the basics of all of the critical elements you'll need. There's also instructions that help you better understand how to create your own style guide in Webflow.

A UI kit featuring dozens of helpful premade components perfect for your next project. These components include content cards, buttons, button hovers, navigation and site footers. There are six different content cards featuring designs perfect for blog posts, news items, products and more. There are 15 different button options and designs from rounded to square style buttons. This component UI kit also features 6 different hover interactions buttons with custom code embeds. Button animations such as floating buttons, underline, sweeps, wiggles and hover pops. There are also five different navigation bars perfect for any kind of template, there are also three different style footers.

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.

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.

Here's a way to display a live date on your Webflow site. Easily add the day, date time and year to your Webflow site using this custom script. Be sure to add the custom script found within the page settings to get this to work properly.

Here's a fun way of adding a custom worm style cursor to Webflow. The snake follows your cursor on the page and creates a trail effect. To customize the worm be sure to update the custom code.

A unique parallax style section that features dynamic scroll interactions for Webflow. As you scroll down an image and background sections move at different speeds providing a unique Parallax style effect. There's also multiple different images that appear when hovering over the links on the side. All of this is built with Webflow's native interactions and no custom code.

Here's a well designed checkbox with an interaction animation. A perfect way of adding a unique checkbox design to your Webflow sites with a fading animation.

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.

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 fun example of creating an animated image on scroll effect/interaction in Webflow.

A funny "game" inspired by Tinder's swiping functionality in Webflow. The site is best viewed at 1440 x 900 in desktop. This mini game is not built using Webflow's CMS and uses sections to create each swiping style page. This was built using Webflow's interaction and doesn't require any extra code.

A large product display for Webflow perfect for ecommerce and other product related sites. This product card features a large primary image, product image, and a call to action button.

Using Webflow's 3D transform, custom animations and a bit of JS you're now able to recreate the Star Wars intro on your Webflow site. Please note that there's custom code required for this to work which you can find within the closing body tag of the Page Settings. There are two scripts, one that powers the music and the other that powers the moving stars.

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 technique demonstrating spinning, 3D circle divs based on mouse movements via Webflow native interactions.

A full page portfolio masonry grid with a mouse hover over effect.

A great way of adding a dynamic, conversational style contact form for your Webflow site. Add some flare to your contact forms.

Here's a way to create a simple drawn underline for text in Webflow. This method demonstrates how to create a span text class and use a hand drawn underline image in text for Webflow. It's recommended to create several different underline length spans as some words look better than others with different sizes.

A demonstration of a multi step form with conditional logic using the Advanced Form builder by Alex Iglesias.

Here's a way of creating a parallax hero image on page scroll in Webflow. As you scroll down the hero section a layered effect occurs with the landscape image. A great way of adding depth to a Webflow site that intrigues the user as they scroll down the page.

A side navigation based on Integromats dashboard design utilizing expand on mouse hover states with further hover over interactions and animations.

A simple but unique text link hover animation powered by Splittext.js, CSS and custom Javascript. When a user hovers over a text link the letters produce a splitting animation in which every other letter moves in alternating directions. There's also a sound effect that plays that's simple yet effective. This cloneable also features a mouse gesture in which a ball follows the mouse cursor location, when hovering over the text link the ball increases in size and then appears appears to text mask and invert the colors of the text that it's hovering over. If you plan on using this cloneable keep in mind that you'll need to add the custom CSS found in the custom code page settings as well as the Splittype.js script. The splittype.js script can be modified and relies on the css class .menu-link in this example. You can also customize and define the audio files in the script, although keep in mind that you'll want to host these externally. The cursor effect is built with Webflow's native interactions using Mouse click interactions.

Here's a unique, 3D infinite scroll marquee for Webflow. To create this effect two blocks are created within a wrapper with a perspective applied to it to create the 3D effect. There was also a self perspective applied to the block themselves which seems to have altered the position of the angles. Then text was added to the blocks inside of each the left and right block. The overflow was set to hidden for both blocks so that the text would move in and out of the blocks. The animation the text moves from 100% to -100% on the x-axes. The duration of the text movement was set to 5 seconds. The second text has a delay of 2.5 so that the animation because the blocks have the same width. Easing is set to linear so that the effect doesn't effect the time and it looks like it moves through both blocks.

Here's a way to have a CMS driven music player, with download functionality for your Webflow site.

Here's a Webflow cloneable component to easily add a vertical step/process section to your Webflow site. Perfect for timelines, process steps or anything that you can think of.

Featured in the Webflow 2021 Year in Review site (https://webflow.com/year-in-review/2021), this Love button uses the Matter.js library (https://brm.io/matter-js/) — a 2D physics engine for the web — to make hearts fall and bounce around as if they have weight. Customize it by adding your own shapes, tweak the speed, or make it rain puppies instead. The sky’s the limit.

A beautifully designed opt-in/sign up modal interaction with Webflow that provides a unique way to sign people up or opt them in via an interaction. The modal has a custom bounce interaction on load and you can use the X or click anywhere on the page to close the box.

Over 20+ different lottie files perfect for the humburger or menu button of your navigation bar on Webflow. These unique menu nav lottie file icons are perfect for movements and animations of a hamburger button within your Webflow site.

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.

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.

A beautifully designed implementation of lightbox driven by Webflow CMS. A great way of adding a lightbox to your Webflow site that's powered by Webflow's native CMS.

Here's a responsive dropdown navigation menu for Webflow. An easy cloneable that can be added to your Webflow site to get your navigation up and running quickly. Best of all it's already responsive and mobile ready.

Box shadows aren't the easiest thing to create in Webflow. Here are 6 different box shadows ready to go and to be added to your projects.

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.

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

A way of creating a 360 degree spinning image via SpriteSpin

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.

Build a multi-step estimator calculator for your Webflow site. This is perfect for unique pricing pages, contact forms, and internal tools for your team.

A started style guide featuring many of the core elements needed when creating a Webflow site. This style guide features typography setting such as headings, text classes, labels or eyebrows, field labels and rich text. Color options such as text colors, text hovers, fill colors, border colors, form colors for both dark and light versions. Elements such as buttons, icon buttons, submit buttons, text links, inline links, pills, interface icons, text fields, text areas, checkboxes, radio buttons, select fields and dropdowns, containers and spacers as well as additional information about this style guide.

Six different call to action designs for your Webflow site. An easy way to add important call to actions to your Webflow site via a cloneable.

A real estate hero section design for Webflow. This hero features a custom load animation, call to action buttons, fully designed slide in menu/nav bar and much more. This features a JS snippet to disable scroll once the menu is open, which can be found in the home settings before the body tag.

Four different magnetic mouse hover button designs. These buttons are great for a CTA button due to the stickiness of the button interaction as it tends to grab your attention and keeps the user focused on the CTA. By using the mouse hover over element interaction to create this animation which makes the cursor act like a magnet to attract the button.

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.

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.

Here's a 3D layered team section that opens up social media and contact information on card hover in Webflow. Lottie was implemented for the social media icons on the hovered animation. This is a perfect way to allow additional information without cluttering up the team section of your website.

A simple and clean Hero section for a Webflow site that features content on the left and a large lottie hero image on the right. A perfect lightweight and clean Hero design perfect for any SaaS or tech company. The Hero section has a bold statement, two buttons and a large demonstration Lottie image. The design is fully responsive and can be used used to add a hero section to your Webflow sites landing page in seconds. This also uses Webflow's interactions for a unique logo animation on page load. This cloneable does not use any custom code or HTML embeds so adding to your site is super simple.

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

Here's a way to create a multi-step Webflow form that includes a step counter, custom confirmation animations and custom checkboxes. A perfect way to filter leads, create long forms that are filled out, and segment your lists/clients.

Here's a text stroke interaction based on the mouse movement for Webflow. Upon moving the mouse around the text stroke follows the cursor around the Webflow site.

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

An interactive accordion design for your Webflow site. This design is a full width accordion built with all necessary open and close interactions as well as a custom mouse cursor design.

Three different logo/client bar sections for your Webflow site. Increase your sites conversion rate by featuring a client logo bar to present social proof and build trust with your visitors.

Two examples of animated Macbook and Apple animated mockups that are perfect for your Webflow site. Two variations of the Macbook coming into view and then opening as the user scrolls down the page. This uses a combination of Webflow interactions and Lottie files, with videos as the backgrounds for the mockup computers. These animated Mac mockups are perfect for portfolios, demo videos, demo GIFs and much more. A great example of how a simple Webflow interaction combined with Lottie files allows for a truly unique and dynamic animation in Webflow.

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.

Ever wanted to create your own, customized scrollbar in Webflow? Now you can use any image you'd like to replace the browsers standard scrollbar. In this example a loaf of bread was used to customize the scrollbar. You can find the custom scrollbar code within an HTML embed found on the Webflow cloneable.

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.

A complete pricing table driven by Webflow CMS. No need to customize pricing, features, or images. All of it is being driven via CMS to make it easy for you or your clients to update their pricing information.

Five unique designs to showcase your Instagram feeds in Webflow. These examples utilize a combination of custom code and Webflow interactions to make the magic happen. Although a majority of the movements are controlled by Webflow interactions. A great way to liven up your Instagram feeds on your Webflow projects. Tie this into automating the importing of your Instagram feeds to Webflow using Zapier or Make and this can be a fully automated and up to date instagram feed.

A clean menu and navigation dropdown design for your Webflow site. When a user hovers over the navigation bar the secondary menu drops down with a nice animation effect.

A fully responsive 3D flippable/foldable card effect on hover. You can also achieve this via the scroll method as there are two options in this demonstration. These affects were created using Webflow's native interaction and require no additional code. The interaction uses hover event and rotate and move actions.

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

BlueKit is a simple and easy to implement UI framework for landing pages. Perfect for prototypes for user-testing sessions during quick design sprints. You can use the template and pre-built blocks to quickly build page structures. This was built with the beginners in mind. Clone the project, scroll down and delete, hide or move elements as you need. Change the color, font for any style of the current elements and all will change accordingly.

Here's a unique vertical split slider that with split transitions between slides for Webflow. A great way to add a responsive, unique slider effect for a full page or section on your site.

A Webflow slider created with SplideJS tied into Webflow's native CMS system. This slider features a draggable slider with a progress bar. In order to get this to work properly you'll need to add the HTML embed splide code as well as the code found within the page settings.

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.

Social media sharing buttons with hover interactions for Webflow. These social sharing buttons feature a unique aspect in which the entire background color changes on hover over to the relevant social media sites color scheme. A simple, yet fun social sharing idea. This was built entirely from Webflow interactions and doesn't require any additional code.

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

A fun text effect where text hops on hover.