Discover Webflow cloneables

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

Here's a way to create a layered, blurred div effect in Webflow. The blurred div sits on top of another div and creates a transparent layer that blurs the bottom div. A great way to add depth to your Webflow site and opens Webflow up to all types of possibilities.

Add numbered paginations to your CMS collection lists via this small custom code snippet.

A simple, interactive scroll text mask technique for Webflow. As the user scrolls down the text moves in separate directions created through a Webflow interaction. The text has a masking effect which can be found on the parent Track div. A great example of Webflow's native masking capabilities.

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.

An interesting concept of building a FPS via Webflow, doom style game. This uses a rotating 3D box and is positioned as though you were inside of that box. Then added some controls so that it seems that you are moving inside of the box but it's actually the box that gets moved around. A fun demonstration of what's capable with Webflow.

A simple yet effective way of adding a countdown timer and clock to Webflow. This example utilizes some custom code and Webflow's native CMS to create a count down timer clock on your Webflow site.

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 unique way to add transition animations to a full screen slider. Using both Swiper.js and a GSAP animation script.

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 free membership splitscreen signup page for Webflow. This cloneable features a sign up page with all of the necessary elements you'd need to create a perfect sign up page in Webflow. This includes sign in with Google buttons, Facebook, first name field, last name, email and password. Each input field has unique states (hover/active/selected) and the entire page is well designed and laid out.

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.

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

A very unique JS hack that shows your sites publishing status in your browser tab. Helpful for Webflow's slow publishing times. Navigate to another page/browser tab and watch the status of the publishing LIVE. In order to get this technique to work you'll need to inject the code found on the cloneable to your browser. To inject the code you'll need to use a 3rd party javascript injection tool for Chrome such as CJS or CJS2. You can then copy and paste the elements above and set it to only load on Webflow.com.

Here's a way to use Webflow's native CMS system for star ratings on your Webflow site. Unlike other alternatives you don't need custom code, simply add the star rating in CMS and it'll populate the stars on your Webflow sites page.

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

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.

A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.

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.

This demo showcases a unique card flipping animation on hover in Webflow. In this effect a panel rotates in from the left to reveal more information about the image, or post and the image slides to the right to make room for the flipping panel. The effect was achieved by placing an image wrapper and content wrapper with a child perspective added to it. The content wrapper is set to 50% within the 3D wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to overflow of hidden so that the image slides to the right you don't see it beyond the wrapper. Interactions were created via rotation of the content wrapper -90 degrees to 0 degrees and moved the image to the right 50%.

Three amazingly designed call to action section scroll interactions created in Webflow. These call to actions are perfect for the bottom of your Webflow sites to create eye popping dynamic elements that draw the users attention.

An easy to implement tooltips for your Webflow site. With this cloneable you can easily add tooltips to your Webflow sites.

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.

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.

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 stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

A fun way of adding a stair melting text transformation animation on hover in Webflow. Perfect for adding a dynamic layer of text to your Webflow site's header or headline section.

A way of creating a 360 degree spinning image via SpriteSpin

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

Here's a great way of adding an infinite sliding crypto price tracking marquee to your Webflow site. This displays live crypto data via the CoinGecko API, displaying both the pricing information and token logos from popular exchanges. You can add other crypto ticker tokens by adding them to the fetch URL of the code. The marquee also features a pause on hover effect.

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.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

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 unique technique to create a text outline via an image mask technique within 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.

Another cloneable pricing component created by Flowbase. This version includes tabs for three different variations of pricing.

A very cool, custom OGL cursor effect for Webflow. You can edit the speed, count of lines, friction, colors and other settings. A fun and dynamic cursor effect for your Webflow site.

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

A unique slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

Here's a concept design of a 3D contact form that follows the mouse on the page in Webflow. An interesting interaction that may help provide some inspiration for other methods on your own Webflow site.

Here's a way of adding an animated progress bar to your Webflow site. All you need to do is update the width % to your preferred number. The animated progress bars add a fun Webflow interaction animation to the metrics section of your Webflow site.

Add a custom cursor of your choosing to your Webflow site. This allows you to add a custom cursor and you don't need to add interactions to each link in your site as well as the hover effect when the cursor moves off the page.

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

Accesible Webflow components library consisting of accordion, menu and an accessible Modal. This cloneable features three core components as well as a thorough description describing important accessibility characteristics and methodologies. This uses Finsweet's client first system and Webflow javascript snippets.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.

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 incredible, full page slider for Webflow. This custom slider features custom next/previous arrows, slide transitions and text description location all driven by Webflow's native CMS system.

Here's a way of adding custom popup modals for video and content to your Webflow site. These custom content modals utilize custom code to disable scrolling when the pop up modal window is open. This helps prevent user confusion and scrolling of the site when these modal windows are open. For the video popup additional jQuery code is utilized to stop the video from running in the background when the window has been closed.

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 yet elegant customized pricing page and tabs design for Webflow. This design uses Webflow's native tabs to allow for customized pricing tables based on yearly or monthly pricing. There are several designs, featuring a simple pricing table with tabs, as well as a full featured comparison pricing table. There are also several bonuses including a seats/user range slider and much more.

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.

Add custom CMS slider with stacking and overlapping cards.

A great example of a CMS slider with custom navigation arrows that are designed within Webflow. It also features a dropdown to filter the slides. This uses the slick slider JS library.

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.

A great way to showcase different content in sections based on users page scroll. This cloneable utilizes GSAP and Scrolltrigger in line with Webflow CMS to showcase various content based on when a user scrolls down a page. In this example as the user scrolls the primary image changes to the next image based on the content that's currently visible. This is also hooked up to Webflow CMS in order to power this by your Webflow CMS collection. This opens all sorts of potential use cases aside from the one demonstrated here. You could switch content out instead of images, or even add videos or other GIF files instead of static images. A simple and yet powerful GSAP cloneable that's perfect for your Webflow arsenal.

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.

Want to compare two products or images on your Webflow site? With this cloneable you'll be able to add an image comparison section to your Webflow site. This is perfect for product comparisons, service comparisons and much more. Please note that this utilizes Beerslide.js so you'll need to add the custom code found in page settings for this to work properly.

A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.

A unique interaction in which a circle follows the page scroll in Webflow. As you scroll between sections a circle follows each section and interacts with the next page section. To use this properly make sure that you add the global styles html embed, as well as the custom script code found in the /body section of the page settings. This uses GSAP as well as Scrolltrigger.js.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

Here's a simple way to create tall horizontal accordions within Webflow. This is implemented using interactions, some custom CSS properties for the vertical text, and a touch of magic. There is a lot of math involved with this implementation and will need to be modified if you want to remove or add any accordions.

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.

Here's a way to achieve a 3D scrollable isometric grid in Webflow. When you add this to your Webflow sites you'll create a dynamic, scrollable grid that adds a 3D popping effect on hover. This technique is accomplished without any interactions and uses Webflow's native transitions and effects. This example also is tied to Webflow CMS.

A fun demonstration of what's possible using Webflow interactions and animations. When a user scrolls down the page the numbers continue to count up or count down on scroll up. This utilizes a number of native Webflow interactions and animations including 3D transforms, some math and a round text effect with absolutely no code. Scroll to the bottom to view the full interaction and the last animation effect.

Two examples of creating modal windows using Webflow's native CMS system.

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

Product cards become sliders when on mobile resolution technique in Webflow. Here's a fun way to add a dynamic element to your site for mobile users.

Want to add some gradients to your Webflow site? Here are 40 free gradients ready to be added to your Webflow sites.

A unique scroll animation in which a spider crawls across the screen in Webflow. This animation was built entirely from Webflow's native interactions and the power of Lottie animations. As the user scrolls down the page the animation is triggered and then moved across the screen using interactions.

Learn how to add a particle bounce animation to your Webflow site. This effect uses a simple copy and paste code within the custom code section. You can even customize the code to add variety to this animation.

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 glass bar navigation design for Webflow. This micro interaction for a glass navigation bar design with hover over interactions is a great way to add social media sharing buttons to your Webflow site.

Looking to create tabs with Webflow CMS? Here's a way of achieving tabs driven by Webflow's CMS adding extra functionality to your site.

Here's a fun hero section that offers a hover slider image interaction for your Webflow site. The images move based on the mouse location and expand and focus on hover state.

Learn how to implement GSAP ScrollTrigger in Webflow. This tutorial and example cloneable showcases several different Scrolltrigger GSAP effects to turn your Webflow site into a dynamic powerhouse. When loading the page you are presented with a primary image and brand name. As you scroll down the brand moves from the bottom of the page to the top menu while reducing size. Further down the hero section appears and one of the words begins to move behind other text. Further down an image appears and then grows as you scroll further down the page. This shifts into the product section in which images appear with a parralax effect over certain words. This shifts into another product section and the backgrounds transition while the images still float above the text. Each section has a different background color/text color with the images continually scrolling above the text. This utilizes a lot of custom code, and utilizes Webflow's native CMS for products and items found on this page with CSS nth-child. You will need to add the custom code found in Page Settings to get this to work properly. Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50 Conceptual design for https://www.minimalgoods.co/

Three different simple page transitions for your Webflow site. These are simple transitions achieved by barba.js. The script can be found on the home page script.

A linkable hero overlay for your Webflow site that grows as the user hovers over the different split sections. Perfect for a modern hero section, pre-landing page, and other similar sections on your Webflow site.

A unique way of displaying a falling leaf via scrolling interactions with Webflow. This was not built with any lottie animations however was built entirely from one large Webflow native interaction via the While page is scrolling functionality. The leaf sits within an invisible circular track that rotates and guides the direction of the leaf. A great example of what's possible to achieve via Webflow's native interactions and a bit of ingenuity.

Now you can utilize a rich text editor for Webflow forms via a little bit of custom code and JS. Easily add this functionality to your Webflow site to make even richer forms.

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.

Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.

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 login page featuring a sign in form with a password showing button in Webflow. This enables you to add a show password option for the password field of a sign in page on Webflow. This cloneable features a simple login page with email, unique form labels, password label and field, stay logged in checkbox and sign in button. This technique uses some custom javascript which can be found at the bottom of the cloneable of the page as an embed.

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

Here's a fun glitch style effect for your Webflow site. With this CSS effect the entire page, text and everything will appear to glitch randomly. It's a fun way of adding dynamic effects to your site.

A multi-column, fully fluid responsive card slider for Webflow. The starting cards are left aligned while the final card is right aligned. The slider mask is set to percentage based width varying on the number of cards in the slider. This way you can control the number of cards shown depending on the size of the screen.

Let's face it, Matter.js is fun! It adds dynamic elements to any site where you can play, throw, and drag items into each other with real like physics. This cloneable features how to utilize Matter.js with SVG bodies. While technically this is easy to accomplish this does require a bit of custom code and HTML embeds, with proper div names to work properly. You can find the custom code for Matter.js and this effect in the Webflow custom code page settings, also take note to the CSS HTML Embed located on the page. This technique uses Matter.js, pathseg.min.js and dcomp.min.js to work properly. This uses element IDs to target the matterContainer and can be further modified to your own specifications. A wonderful example of how to add Matter.js to your Webflow sites in a fairly straight forward manner.

Backdrop filters for Webflow that show three different background effects including inverting colors, saturating colors, hue rotation, and grayscale created by Finsweet. This cloneable was created to showcase Webflow's latest native backdrop filters.

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.

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.

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 simple way to add social media links with a hover animation to your Webflow site.

How far can you push Webflow's native interactions? In this demonstration you'll find a Mad Max movie intro page that showcases just how far you can push the limits of Webflow interactions. There are no gifs, gimmicks, or lottie/SVG animated files being used here.

Here's an example of a 360 degree image showcase featuring Nike Air Jordan 1 Retro High Spider-Man origin story. Please note that this example only works on desktop currently.

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 fun, fully responsive slide in menu animation for your Webflow navigation. This menu slides in via a dynamic animation and more importantly is already mobile and responsive friendly.

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

Here's a technique for changing the size of CMS elements with a toggle button to give your clients more flexibility in displaying CMS items in Webflow. Each element has a toggle, medium large and align center. When one of those options is active, a class is then added to the grid item via custom code. This then changes the design based on the clients selection. In order for this to work, the embed field in each CMS item and the jQuery code must be added. Tutorial: https://youtu.be/DsuCGRSgJIk

Another great 3D card hover effect created in Webflow. You can change the angle from the transformations and you are also able to change the layout if you wanted.

Interactive and inline 3D icons built with Spline and Three.js. A perfect way of creating interactive inline customized icons built with Spline and powered by Three.js