Discover Webflow cloneables

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

A demonstration of how to add Cookie Consent to Webflow using Finsweet's Cookie Consent. This cookie consent Webflow cloneable features various designs for cookie consents, including modals, banners, pop-ups and more.

A compilation of landing page design components including features, cards, call to actions, testimonials section and more.

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

Using Airtable and No Code API to power the job listings of a Webflow site rather than using the CMS.

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.

An infinite diagonal parallax slider for Webflow that's draggable or can be changed via arrow keys.

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 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 simple yet fun Webflow interaction in which a custom cursor becomes visible upon item hover. This technique utilizes Webflow interactions but does have a small CSS snippet HTML embed, so be sure to add that. This example utilizes Webflow interactions Mouse hover events. When the mouse moves over an object the pointer scales accordingly. This is a fun, lightweight example of adding even more unique animations and interactions to your site.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

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

An example of how to use Scrollify.js when you want partial height sections rather than full viewport height sections. View the full tutorial here: https://www.youtube.com/watch?v=E0jbNJ6M494&ab_channel=KevinHaag

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

A great style guide to get your Webflow site up and running faster. Included in this style guide is typography, hero text, H classes, paragraph, rich text, color swatches, buttons, shadows and more.

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

Here's a way to create auto rotating tabs in Webflow based on a timed interval. This helps animate the static tabs and create a auto-rotating tab functionality, which are set for 5 seconds in this demonstration. This allows you to use the native Webflow tab functionality and users can still click between tabs. Interactions also still work. The animation and auto changing stops when a user hovers over any tab. This technique uses some custom code found in the embeds as well as Webflow native interactions.

A unique headline animation for Webflow powered by Anime.js. The headline text sweeps in from the bottom one letter at a time and after displaying the line sweeps out one letter at a time with a fading effect. In order for this effect to occur you'll need to be sure to add the custom code in both the head and closing body tag in Page Settings. This is perfect for a preloader page or temporary scrolling section.

Here's a way to add some animation to your text elements within Webflow. The outer line of the text is animated and creates a fun effect for your text.

A fun way of adding detailed information for your CMS items via a jQuery powered sidebar. The project uses a single CMS collection list to populate both the grid and the information when clicking on the card.

Add a Vimeo video to the background of your Webflow site with this cloneable. This allows you to run the video as a loop in the background. If you click on the unmute button the video will play from the beginning and the sound will become activated. This allows you to add Vimeo videos to your sites with better flexibility and increased usability. This requires a bit of custom jQuery code and the Vimeo API must be included if you want to utilize Vimeo iFrames. You can find the jQuery and relevant code within the custom code settings of the page. Take note that this also utilizes data attributes and Webflow interactions to work properly.

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

Highlight text as you scroll via Webflow via interactions that are based on the center of the viewport. This is created via Webflow interactions and some custom CSS found within the HTML embed found in the page designer. As the users scroll down the page a block of text is highlighted as it enters the viewport. This could be great for lyrics or similar style sites.

An excellent example of Swiper.js for Webflow CMS items. This example is perfect for a hero section, or any Webflow slider that wants to be upgraded to utilize Swiper.js. This demo includes scroll interactions, in which each card is changed upon scroll up or down on the mouse and also includes next & previous buttons to navigate between slides. Each slide changes the thumbnail previews of each slide, updates the slide active and slides the text of each slide. The thumbnails and text titles allow you to navigate between each slide as well. This script utilizes Webflow CMS, allowing you to utilize Webflow's CMS items in your native Swiper.js slider. Keep in mind that this utilizes Webflow's custom code section and you'll find the relevant code within Webflow's page custom code settings of this Webflow cloneable.

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

Here's a way to have an image slider driven by Webflow's native CMS. In this example they are using slick slider tied to Webflow CMS.

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.

A free dashboard collection for an ecommerce company.

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.

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 fun way of adding a full screen menu with image hover effect on text links. The full screen menu is responsive and easily copy pastable to your Webflow site.

A simple review slider with a lottie star load animation. When each new review slide is loaded the lottie stars load one at a time. This is also mobile responsive and should work at all resolutions.

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 slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

A demonstration of product cards in Webflow that utilize hover over interactions to effect both image and title. When a user hovers over the cards in Webflow the image div grows and the title appears to follow the mouse while hovering over each card. A fun interaction and a way to showcase products in a unique and creative way.

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

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 sign up authentication page design for your Webflow site. This includes show/hide password, input field autofocus, image slider with a responsive design.

Here's a way of adding a custom, target style cursor to your Webflow site. This cursor creates both a vertical and horizontal line on the page with a red dot, much like a target/red dot on your Webflow site.

Here's a way to add a dynamic counter metric section to your Webflow site. This is accomplished via the simple JS available within the custom code section of the page settings.

Here's how to create an infinite marquee within Webflow using no additional code and strictly based on Webflow interactions. There are numerous examples such as horizontal from right to left, horizontal from left to right and vertical in both directions. This technique uses the page load trigger and by wrapping the items in the marquee (of the same size) in a parent wrapper. That parent wrapper then utilizes the move functionality in Webflow interactions from 0% to 100%. You can then customize the duration to slow down or speed up the marquee animation. A great example of relying on Webflow interactions vs CSS or JS methods.

An analog clock built from CSS & JS in Webflow. The design is built from divs, while javascript and CSS drives the analogue movements of the clock hours and hands.

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

Five different mega menu navigation designs for Webflow. This helps you add unique mega menu designs to your Webflow site that feature different mega menus dropdowns perfect for your site.

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

A unique Valentines Day card creation tool via Webflow. This shows ways of creating a form with a static URL creation and a way to develop dynamic card content.

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

Three individual animated buttons with hover interactions, which changes color, scale and rotates. On hover the svg mask changes its color via a button color background.

Get more insight into why your clients are cancelling with this cancellation insight form for Webflow. This cancellation modal form data is submitted directly to Webflow, meaning it's easy to export and analyze the results at any point.

Add a dynamic pricing table with a range slider to help your clients find the best package for them. This is using rangeslider.js. The table is NOT responsive, although shouldn't be difficult to make it responsive if you wanted. Be sure to add the custom code to get this to work properly on your site.

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

A fully built FAQ accordion section powered by Webflow native CMS collection with native interactions and animations. A great way to add a frequently asked question section to your Webflow site or clients site that is powered by the Webflow CMS system.

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

Another beautiful sign up page with a background video sidebar for Webflow. This features a Google sign in button, Facebook sign in, email and all the necessary form input design elements.

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.

Want a full page slider effect in Webflow? With this technique you will be able to create a full page slider. This is an illusion using the page loading interactions, making the page look like it slides to the next page.

Add a monthly and yearly annual toggle pricing page to your Webflow site. This predesigned pricing table is built with the relevant toggle interactions to add an annual and monthly pricing table to your Webflow project.

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.

Here's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.

Automatically add an outgoing arrow to all outbound links on your site. This is a custom CSS code solution that will need to be embeded into your project. The arrow icon can be replaced with an SVG image in the CSS code. Simply adjust the styling in the CSS and you're all set.

Here's a way to add an underline effect to your Webflow headlines and text. The underline is fully editable to customize to your requirements.

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 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 is an interaction for hovering over a card using Webflow interactions. Simply clone this and add it to your site to add a dynamic hover interaction to your Webflow site.

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

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.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

A 4 column pricing table cloneable design featuring a bump effect for a primary package in Webflow. This beautiful pricing table includes features, package names, pricing info, and a 3D bump effect for the primary package that you'd like to put emphasis on.

Webflow does a decent job of allowing us to override symbol content, although you are still stuck with styling. This method/workaround allows you to override the symbol styling as well. This is great if you want a toggle between a few modes (dark/light) or different theme styles without having to maintain extra symbols. This works by linking a hidden text block to an override field to specify a combo class. Custom code is then used to define the combo class to the symbol relative to your trigger. This allows you to override the styles for the trigger parent, sibling or child elements. Please note that this only works on the published site.

Here's a way to create a forever scrolling effect for your Webflow site. With a custom piece of code you can create an infinite page scroll which continues to clone the body over and over again. Not sure how you could use this effect but a fun demonstration none the less.

Another unique button animation for Webflow. When a user hovers over the button the text color changes and the arrow icon animates via native Webflow interactions.

Create a popup iframe modal in Webflow easily with this cloneable. This cloneable allows you to you easily create a popup modal of an iframe URL, perfect for portfolios or pages in which users do not need to navigate to another page. Keep users engaged and on your site while allowing them to preview portfolio sites and other similar projects.

A CMS driven range slider that updates the price based on the selected range in Webflow. This pricing range slider is connected to Webflow's native CMS system. Note that this requires custom code within the Body close tag section to work properly.

A simple and easy way to copy and paste social media sharing buttons to your Webflow site. Simply clone the project, copy and paste to your project. This features two different social sharing designs, one that is a simple horizontal bar and the other is a vertical bar. This technique uses HTML embeds to create the social sharing links with the link targets being based on the class name of the link divs. A unique way to create social sharing in Webflow for major sites like Facebook, Twitter, LinkedIn, Email, Reddit, Tumblr and Pinterest.

Add a cookie consent to your Webflow site in no time. Here are 5 different designs for a cookie consent with working codes attached at the bottom of the page.

Add a hover slider style interaction animation to your site for revealing an image, or div content.

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.

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

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 way of adding video on hover to your Webflow cards. Using basic hover interactions you can create customized cards that play video on hover over on your Webflow site.

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.

Blend modes meets an infinite neon animation via Webflow. The blur filter and mix blend modes were used to create the neon effect with a background gradient creating the color change across the screen. The blend mode was created via CSS as this was created prior to Webflow's native support so you'll need to add the CSS to get this to work properly. The infinite movement effect was created with Webflow's native interactions which shows the dynamic power of Webflow interactions. The infinite symbol was created using 3D transforms and the blob follows around the path.

A custom slider that changes the size and focus of the slide after it changes to the next slide. Perfect for emphasis on the main slide while maintaining a transition effect for the other non-primary slides in Webflow.

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

Here's how to utilize a Deck of Cards API via GitHub, VS Code and jsDelivr with your Webflow sites. Be sure to check the tutorial video and GitHub repo to tie it all together. A nice way of understanding how to make Webflow content even more dynamic via the power of low-code.

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 simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

Here's a demonstration of a frosted glassmorphism card with hover and mouse interactions. An easy way to add a glassmorphic effect to your Webflow site.

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.

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.

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

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.

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.

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

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

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.