Discover Webflow cloneables

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.

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

A fun Webflow interaction that follows a users mouse as it navigates over a grid in Webflow. The arrow follows the direction of the mouse as it enters the viewport using Webflow's native interactions. The size of each grid item also increases or decreases based on the position of the mouse on the individual items and grid overall. A great example of what you can build with Webflow's native interactions.

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.

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

Add Twitter tweet cards to your Webflow site with this free cloneable. This cloneable recreates the basic design of a Twitter card to allow you to add testimonials, tweets and other Twitter related cards to your Webflow site. Add this to something like Integromat or Zapier and you could automate new tweets to your site. The benefit to this is that you can reduce the load time of your site be not calling the external Twitter embed JS library.

Explore techniques for implementing unique Webflow CMS sliders via Swiper.js. Flow Ninja built 8 different slider options including a basic slider, a thumbnail slider, infinite loop swiper great for client logos, auto height, pop-up modal sliders, grid sliders, vertical sliders and a number pagination slider. These prebuilt Webflow sliders utilize Swiper.js to operate correctly so it's important to add the code implemented in the head tag and closing body tag found in the Page Settings for this to work properly.

Three different variations of an infinite scrolling marquee driven by completely by Webflow CMS. All you need to do is choose the marquee, use Webflow CMS and you've got an infinite scroll marquee. Three different size variations available in this cloneable. The scrolling marquee is created via CSS, making this easier to implement then Webflow's native interactions, especially when incorporating Webflow's native CMS. You'll find this code within the HTML embed.

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.

A beautiful membership pricing table featuring annual, quarterly and monthly toggles for Webflow. This pricing table features everything that you'd need for a 4 tier pricing table that offers discounts based on annual, quarterly and monthly pricing options. This template features all the necessary interactions to get this tabbed pricing table to work properly.

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.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

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

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.

An amazing background color changing on timer for Webflow. The background color changes automatically based on a timed interval of your choosing. The animation uses a small snippet of JS within each page. In order to change the colors you will have to change the hex code in the array.

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

A full UI kit that contains over 40+ different cloneable components and offers a solid base for any Webflow site. The components include hero sections, portfolio sections, content sections, team sections, blog, CTA, FAQ, buttons and footers.

Here's an example of displaying information on card hover animation for Webflow. When hovering over the image card the title, author and view project button appears from the upper left of the image. The effect was achieved by placing a div block inside of the card wrapper. In the interactions the div block was set to an opacity of 0% initially. On hover the div block moves to the lower right and the opacity changes to 100%. On hover out the div block returns to its original position and the opacity changes to 0%

This is a great cloneable if you'd like for your users to stay on a page without navigating to other pages. This AJAX iFrame modal utilizes GSAP to allow users to create iFrames that load via a modal window when a user clicks on a link via the page. This helps keep users on the primary page without the need to navigate to and from pages endlessly. Keep in mind that this technique utilizes prefetching links, which can cause performance issues on large sites. As mentioned this technique is utilizing GSAP and you can find the custom code within the page settings of the Webflow designer. A clean and relatively lightweight solution to allowing iFrame style embeds of your sites own content that loads quickly, thanks to prefetch and the power of GSAP.

A CMS driven accordion calendar for Webflow. Perfect for an events page or about page on your Webflow site. In order to use this be sure to copy the hidden section which includes an unbounded CMS design.

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

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

A fun 404 page for Webflow featuring a scrolling marquee and unique hover over interactions. This is a rebuild of the pluto.app/404 page. Featuring various scrolling marquees at different speeds with a gradient background and mouse hover link interaction.

A number of different examples of utilizing Countup.js in your Webflow projects. The examples include, currency count up, intervals, scroll and more. The first example loads when the page is loaded, the second example counts up when the item enters viewport, the third item counts up several items at different intervals and finally there's a currency countup that continuously counts up. This requires custom code which you can find in the custom code section of page settings. Each example is commented within the code and allows you to update the target ID as well as the final count number. The second example is the scroll into view option and can be added as shown in the code. There's also a count down example, count up example with a duration and suffix. This is a great cloneable if you plan on adding count up or count down text items to your Webflow site.

Here's a way of adding a full page infinite scrollable and draggable grid in Webflow. This grid is fully draggable in ALL directions, horizontal and vertical as well as in any other direction. A perfect way of adding a unique design for portfolios, photography and much more in Webflow. This can also be used to tie into Webflow's native CMS system.

A spiral 3D spinning interaction that requires no WebGL, third party libraries or any custom code. This was built entirely in Webflow with Webflow's native interactions. As a user scrolls down the page the images spin around and rotate around the page. A fun and unique interaction that showcases the power of Webflow. This is perfect for portfolios, or other items on your site. This was built utilizing While scrolling in view and taking advantage of only two options, move and rotate. Essentially the items layout allows for the positioning of the item. By utilizing class names each class will have the same result and effect.

A subtle, yet clean gradient moving background interaction created for Webflow. This cloneable was built with only Webflow native interactions and does not require any additional code or HTML embeds. The effect was created by adding 4 different circle gradients to a gradient wrapper. The moving gradients uses Webflow interactions page load trigger and manipulates the scale of each item over a timeframe. Essentially each item grows and contracts at different intervals creating the appearance of a moving gradient background that isn't overwhelming.

An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.

Here's a way to disable right click images in Webflow. The custom code will disable right click on either images or lightbox images. In order for this to work simply copy and paste the code found in the Copy this code HTML embed. Keep in mind that this only disables the right click although images can still be downloaded from the web without the right click capabilities.

A simple yet effective Webflow sign in/login page featuring Google and Facebook social sign in. This form features native Webflow input fields with states, checkbox and buttons.

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.

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.

This is a demonstration of how to randomly order CMS items on each page refresh using custom code. This was created because the random CMS settings within Webflow wasn't giving a random order on each page load. This is an example of how to truly have a random CMS list on each page load. This uses custom code and a class name assigned to the cards. There is also a non-CMS version of this as well.

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.

Liven up your hero section with this unique vertical hero scroll animation.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.

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

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.

Eight different examples of Typed.js typewriter effects perfect for your Webflow projects. The eight variations include a standard simple one, which types the word once and then provides the typing cursor. A looping version in which it retypes the same text over and over again. A multiple text version in which you signify different texts that you'd like for it to type and it cycles through each one. A version without the blinking cursor. One with a custom cursor that's an underscore. Smart backspacing in which deletes only portion of the sentence and then retypes it. A version that fades out after typing the sentence. Typing within an input field, perfect for searches or suggested searches. You'll find the Typed.js code within the sites custom code settings and can be modified to your specifications.

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to your Webflow site.

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

I loved how the Ribbon Finance website looked, so I couldn't stop but rebuild it in Webflow with a "party mode" on CTA hover...

A well designed hero section that offers 3D styled product demonstrations with hover over interactions. Perfect for a startup or services company that wants a fun, well designed hero for their homepage.

A unique animation for a menu/navigation in Webflow. When a user opens the menu it opens with an expanding circle animation to add a unique design flair to your Webflow navigation/menu.

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.

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 custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

A CMS based Pinterest masonry grid design for Webflow. This unique styled masonry grid is powered by Webflow's native CMS and provides unique hover over interactions.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

A basic styleguide for beginners. Includes font style demonstration, color palettes, text colors, display classes, headings, text blocks, paragraphs, rich text elements, buttons, links, form fields, checkboxes, radio icons, icons, logos, class codes and more.

Want to add smooth scrolling to your Webflow site? With this cloneable you'll be able to add smooth scrolling via luxy.js. Adding smooth scrolling doesn't need to be complicated and there are plenty of options to achieve this inertia type scroll effect although Luxy.js provides a great way to achieve this.

Here's a way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

Here's a way of adding a text reveal animation on scroll to Webflow powered by Anime.js and Luxy.js. As a user scrolls down the page the text animation is displayed showing one letter fading in at a time. As you scroll further down the page you'll notice the smooth scrolling effect created by Luxy.js. All of this is powered by the custom code found within the page settings of both the header and body section. Be sure to add these to your site in order for this method to work properly.

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.

Add a unique and customized menu and navbar to your Webflow site. This example provides a unique feature of an image preview on link hover in the full page menu/navbar of your Webflow site.

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.

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

Add a stacking slider as inspired by houseof.world. This adds a fun, 3D effect to your sliders that transitions and moves the cards forward, and to the back upon next slide.

Three modern author/bio box designs for Webflow. Easily add a customized, modern author bio box to your Webflow site with one of these three premade layouts that are responsive and well designed.

A fun demonstration of animated icons with hover states in Webflow. They're very simple line icons with subtle, yet unique, hover interactions. One thing to note with the shapes that change size is that the size animation rather than scale, as adjusting scales adjusts the widths ever so slightly and doesn't make the animation look precise. Size and move were the only two animations used for these shapes. The only easing was used was ease and all the animations have a duration of .5 seconds.

Add a fully responsive preview of your Airtable database in Webflow

Supercharged marquees powered by GSAP. These unlock a whole new level of customization to your marquees via GSAP. The first example showcases two marquees, both on different z-indexes with an image in between both of them so that one marquee is in front of the image and the other is behind it. The next marquee provides a unique vertical marquee that speeds up or slows down as you scroll it into view. The third and final marquee is a horizontal marquee that does the same as the second. As you scroll this marquee into view it speeds up the marquee while the page is scrolling. As mentioned these demos rely upon GSAP and Scrolltrigger to function properly and provide the functionality. You can customize the code from within the custom code page settings.

Here's a way of creating a glowing, 3D hover card effect in Webflow. When a user hovers over the card the card creates a 3D effect with a gradient outline, another interaction is added to show a 3D rotating reflection. All of this was created with Webflow interactions and zero custom code.

Here's a way to add a neon sign text effect to your Webflow site. A perfect CSS effect that creates a neon sign style text effect in Webflow.

Here's a way of adding a flipping card animation to cards on your site. This component can be used for a number of scenarios and allows for additional information to be displayed on your cards without taking up important site real estate.

A GDPR compliant cookie consent modal window for Webflow. This cookie consent compliant GDPR Webflow cloneable uses the fs-cc attributes to your scripts and can easily be implemented on any Webflow site. Simply clone the project, add the custom cookie consent script found in the custom code settings in the projects settings and modify them according to your requirements. The cloneable includes a premade cookie consent modal window with the ability to customize cookie settings and clearing all cookies.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

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

Here's a unique Webflow mouse hover interaction in which the background changes based on the location of the mouse on the page.

An animated, 3D layered social media sharing buttons for Webflow. When a user hovers over the buttons they pop up with a 3D layering effect on your Webflow site.

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

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

Here's a virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

A fun exploration of SVG text effects as loading/enter pages in Webflow. This demonstration features three different circular SVG intro animations of differing color schemes and effects. The animations are all created via Webflow's native interactions and require no custom code. The animations are created with SVGs and a combination of Webflow scale, opacity and hide/show interaction states.

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's a way to build a toggle switch for your Webflow site using interactions. A great way to learn how to build toggle switches in Webflow and get a better understanding of Webflow interactions.

An interactive background animation for Webflow created with Spline. There's also a custom loading animation with a background image.

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 beautifully designed estimate, investment portfolio, quote page in Webflow. Perfect for an investment portfolio/funds, or anything requiring detailed investment/financial quote structures. With a little bit of work this could be made both responsive and CMS driven, allowing for clients, employees or others to make this for internal sites.

A unique animated button with a grid effect on hover via Anime.js

A beautifully designed product card for your Webflow site. An easy to implement cloneable for your Webflow site to add product cards.

A fully built Webflow CMS for structured data to help provide insight into how to structure your Webflow CMS to support markup and Google Structured Data.

A fun and unique way of adding scroll interactions to your Webflow site. It is slightly difficult to edit the contents of the slides, however you could make these CMS items to make it easier to edit the content within each slide.

Add a character count to an input field on your Webflow site. This is perfect for creating limitations or showing the character count of an input field.

Here's a way to add a horizontal scrolling section to your Webflow site. It's perfect for timelines, features and other similar sections of your site. This technique also has a scroll into view animation for each point.

Here's a way to add a custom mouse cursor tooltip in Webflow. This custom tooltip fades in when hovering over an element and follows the mouse pointer over that element. This could be used for project title information, additional/next slider information and much more. A majority of this is created with Webflow interactions. Please note that there is some custom style CSS in the head section of the page.

Build a staggered animation with gird and Anime.js in Webflow.

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

20 predesigned CSS link hover effects perfect to copy and paste on your next Webflow project. Each individual text link hover effect includes its own CSS for the hover effect. Simply add this to a custom HTML embed or to your sites custom code section. Effects include strikethrough, double underlines, scramble, moving in from both sides, growing and much more. A simple way to easily enhance your sites experience through simple, micro interactions.

A unique slider pricing calculator that updates the pricing table based on the slider options in Webflow. This is a great way to customize your pricing page tailored to the users unique features that dictate your pricing for your Webflow site and service.

A fun interaction that shows an image trail on text link hover in Webflow. When the mouse hovers over a text link in Webflow an image trail is shown. This effect uses vanilla Javascript to paint the images when hovering over an object.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

Here's a way to provide an add all to cart button in Webflow ecommerce. Perfect for upsells and multiple purchases being added to cart at the same time in your Webflow ecommerce store. Be sure to add the custom code snippet found within the closing body tags of the Page Settings in order for this to work.

Here's a way to add notched/slanted buttons in Webflow. Using custom code you're now able to create a custom notched button by simply adding a subclass to your button. This code can also be modified to create notched blocks on other objects than just buttons.

A fluid, morphing SVG background for your Webflow site using Anime.js. Perfect for the background of your Webflow sections, or entire 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.

A custom page transition for your Webflow site created with Webflow interactions and a bit of custom code. This transition provides a nice, multi level swiping transition from left and then back to the right.

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.