Discover Webflow cloneables

Here's a way to add magnetic images to links on Webflow. The images appear as you hover over the links and stick to the mouse and overlay the text over the image. This method relies strictly on Webflow interactions and doesn't require any custom code or HTML embeds. The interactions use a combination of hide/show, scale, opacity text color and border color to work properly.

Here's a way to utilize Webflow's native CMS system to power tabs on your Webflow site. This is perfect for designers who want to allow their clients to edit/update their Webflow sites within the CMS system, rather than the designer. All interactions are built with Webflow's native CMS system and interactions.

A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

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.

A way to achieve text appearing on scroll effect.

A simple landing page perfect for a digital business card via a QR code or other short URL. This design feature a hover slider effect and large cards to make it easy for users to navigate your digital business card site.

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

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.

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.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

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

Six different wonderfully designed material style navigation menus and footers for Webflow. These are perfect cloneables to quickly build either navigation menus, footers, or both for your Webflow site.

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 pricing table with tabs to display pricing in a unique and interactive way. This allows for nearly full screen descriptions of each tabbed pricing item.

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.

Four unique methods for creating 3D elements in Webflow natively without using any type of code. No custom code or lottie animations were used and all of this was accomplished naturally via Webflow interactions.

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

An automatic timezone clock for cities around the world in Webflow. This shows the current local time for your city and then keeps it up to date every 60 seconds. Custom CSS was used for the blinking effect on the clock. Here's how it works. It uses the data attributes to define the timezone. Custom code is then used to display the local time of your city. There are separate colors for open, evening and closed office hours. These can be styled through their respective classes however you'd like. Find your timezone via timezonedb.com/time-zones. The location row element contains the data-timezone attribute, change that to your timezone. Everything else will auto update.

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.

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.

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.

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

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.

Simple tooltips using Tippy.js. You can add more functionality via their dcouments.

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.

Here's an example of creating 3D interactive balls via Webflow using only divs and color gradients, no images or custom code was used to create this effect. When someone moves the mouse on the Webflow site the balls/divs move in different directions.

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

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.

Another fun text effect, this one shows you how to scramble text between transitions.

A fully interactive dark mode Firefox browser mockup for Webflow. This Firefox mockup features openable tabs, closeable tabs, form inputs and button hover interactions that make this mockup feel like a real Firefox browser window. This is perfect for demonstrating products, product images and much more.

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.

Seven different feature layout designs for Webflow. These unique designs allow you to easily add feature sections to your Webflow site. Great looking, responsive designs.

Here's a way of using Webflow's native CMS system and Webflow lightbox together as natively they don't work well together. This is a tiny and easily-implementable script that combines the best of both world. Create your nested collection with lightboxes, check "link with other lightboxes". Then, replace "collection item" in the script with the class name you decided to give your collection.

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.

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

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

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 unique way to show off your team cards on your Webflow site. When you hover over a card a social media panel appears on the right hand side. The dots are color coded to match the brand color of the social media platform. You can place text or icons inside of these dots as well. On the hover a panel appears with the brand color and a large social media icon. The image rotates -10 degrees to 10 degrees on hover. The animation is pretty straight forward. The only thing to note is that the dots had to placed in the same wrapper so that when you hover over the dots you could target a sibling element within the interaction. This allowed to make sure that the effect could be repeated across multiple cards by targeting the sibling classes of the dots.

Here's a way to add smooth scrolling to your Webflow site using tween max. There are several ways to achieve smooth scrolling in Webflow, and this is another way of achieving that effect.

How about a 3D interactive iPad mockup in Webflow? Here's a way to add an interactive, 3D iPad mockup to your site.

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 well designed frequently asked questions (FAQ) cloneable design for Webflow. This provides all the interactions required for opening and closing the accordions that will fit perfectly on your Webflow site.

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.

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

A unique 3D scrolling interaction created for Webflow. As a user scrolls between sections each transition has various 3D effects with the image coming in one way and the text flying in another way. A majority of this was created with Webflow's native interactions while some minor CSS was utilized for the scrolling effects.

Here's a cloneable 4 column feature dark variation of a pricing page in Webflow. This feature rich version includes important aspects like tooltip hovers, comparison tables/grids, and sticky headers on page scroll. This version also includes a mobile friendly tabbed version for phones and smaller resolutions.

Always hunting? Discover new drops on pulse before anyone else does. Note: This is for educational purposes only and and not an actual extension (all NFTs and links in this project have no affiliation to their owners or platforms). Feel free to clone!

Here's a technique to fade text in and out on page scroll with various sections and different texts in Webflow.

A sticky, stackable cards section that stacks upon scrolling on the Webflow site.

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

Here's a way to add a unique image hover interaction to your Webflow projects. When a user hovers over an image various hover over effects take place. This demonstration shows several different methods. You can use this animation variants found on this page. To add this effect to your project copy the image wrapper (.wrapper) and change the transform-origin of the images as you'd like.

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.

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.

A fun way to have an animated, cursor following dog animation on Webflow. This is driven fully by div elements and a bit of CSS and JS to make the magic happen.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

A responsive, full-screen, Vimeo video embed in the background of the site on Webflow. Please note that you need to visit Webflow's cloneable page of this item to preview it. Change out the video link in the video-embed element nested in the video-wrap div.

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.

A simple yet effective CSS infinite marquee for Webflow featuring hover pause capabilities. Easily adjust the animation duration via the embed element with CSS. While you could create the marquee effect with Webflow's native interactions this allows you to bypass added JS through a simple CSS embed allowing for greater control over the marquee via this CSS script.

A full page Calendar with week/day/month setting and works with Webflow CMS. This full page calendar design relies on custom stylesheet and JS to work so you'll need to copy both the CSS and JS found in the head and closing body tag of the page settings. Please note that this is primarily driven via CSS and thus Webflow's designer becomes rather useless for the design other than the Webflow CMS elements tied to it.

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.

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

Add custom CMS slider with stacking and overlapping cards.

An easy way to add a text link highlighting effect to your Webflow site. With this cloneable you'll learn how to add an inner shadow on link hover with a distance attribute to create a growing underline effect for your links. This method uses no interactions and relies on Webflow's native transitions.

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

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.

A unique horizontal scrolling technique created for Webflow and built using a combination of Webflow interactions, custom CSS code and jQuery. This allows you to add horizontal scrolling to your Webflow site, this cloneable also features a page loader and a mouse cursor interaction. As you scroll down the page you'll notice the horizontal slider that also features parallax style effects, there's a unique text outline stroke effect. Each section is driven by Webflow CMS which allows you to easily add or remove pages based on your needs and requirements. This was built to work on both mobile and desktop devices making it responsive for any size browser.

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

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 way to utilize cookies to keep a modal, window or banner element permanently closed after a user has closed it in Webflow. This is perfect for cookie consents, one time offerings, opt-in modals and much more. Be sure to add the custom code found in the head section and body tags of Page Settings to your Webflow site.

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.

Want to practice your typing speed in a game built on Webflow? Check out this unique cloneable that creates a typing speed/accuracy game in Webflow.

Here's a way to create a zoom in on click technique in Webflow. If you need to magnify an image on your Webflow site this cloneable is perfect for you.

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.

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.

A membership pricing table design for Webflow featuring three pricing structures in a clean and modern design. This pricing table cloneable features a unique header section and three different pricing packages with an emphasis on one package. It includes price, description, button and individual pricing options.

Three well designed tab content interactions perfect for your Webflow site. The first variation has a unique sliding feature when a new tab is selected, the content then appears to fade in coming in from the bottom. The second variation has an underline for the active tab, the active tab underline then moves to the next selected tab while the content appears to fade in from the bottom. The final version appears to fade in from the left to the right with a different appearance to the content. These tabs all utilize Webflow's native tabs with Webflow interactions. Keep in mind that all of the tabs are individual interactions so the more tabs that you add the more interactions you'll need for each individual tab. Overall these are well designed and thought out tabs that would be perfect for any Webflow site.

Here are well designed service cards that have a rotation hover interaction that highlights and rotates the card for Webflow. This perfect for adding 3D dimension to a Webflow site via service cards, project cards or even pricing tables.

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.

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

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.

Here's a quick and easy way to add a date picker to your Webflow site via flatpicker.js. The reason we love flatpicker.js is because it's a quick, and easy solution and is incredibly customizable. You can find flatpicker.js docs here: https://flatpickr.js.org/

Here's a way to add TikTok videos in a slider with Finsweet client first naming conventions driven by Webflow native CMS. Adding videos could be automated with Make/Integromat or Zapier with the creation of new items in the slider from this collection. This uses the CMS to drive the videos and uses Client-first CSS classes.

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.

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

A unique 3D depth of field native Webflow interaction. As a user scrolls through this section the images come towards you from the back of the page. This technique was built using only Webflow interactions and does not use any extra custom code or HTML embeds. This Webflow interaction utilizes the While scrolling in view trigger, it then moves the Z property from 0 to 250 rem. Each individual item also has an opacity and filter applied to it as it's scrolled into the view. A well thought out and unique Webflow interaction that will surely impress your visitors.

Hatch is a utility framework/UI kit that is made up of 2,200 low-level utility classes, allowing you to get started on your Webflow sites faster. From font sizing to spacing scales based on responsiveness. The documentation for each class can be found here: https://www.notion.so/Hatch-0d4a03cf6c9f474787e59484822d09c7

An advanced demonstration of using Finsweets Attributes CMS Filter using no-code for Webflow. The example includes a search input, sorting, checkboxes, range slider, sorting, drop down, radio buttons and more. A great way to understand the capabilities and advanced filtering options of Attributes CMS filtering.

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.

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.

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.

A popup that shows you the scroll page percent and location of your vertical height on a site.

Here's a way to create a feature section that highlights the text and changes the image based on page scroll. This was created with 100% native Webflow interactions.

A unique tinder style swiping module for Webflow. This demonstration uses fish and a tinder like design to like, or dislike fish. This was built using Webflow CMS and Jetboost for the like feature.

A scroll to reveal text masking interaction in Webflow. When a user scrolls down the page the text is zoomed into the masked image and reveals the image upon scrolling. You can edit the text inside each section and change the image to your choosing. You can also add other icons or graphics inside of it. Just be sure to use black/white elements only.

A unique GSAP velocity based interaction demonstration for Webflow. When a user drags the slider the items react based on the velocity of the drag on the slider. A unique interaction that adds a new dynamic layer to a normally static style draggable slider. Take note that this utilizes GSAP and Observer.js to work properly and you'll find the custom code within the custom code page settings. In this you can update the attributes of the velocity such as the velocity, and CLAMP. You can also adjust the rotation amount, duration and easing used. This is a mobile friendly and desktop friendly slider solution that utilizes the power of GSAP and Observer to work with Webflow's native CMS collection lists.

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.

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

Automatically show the correct tab based on the current day of the week on your Webflow site. This uses some custom code, although shouldn't need to be modified at all when you clone this. A video walkthrough is also included!