Discover Webflow cloneables

Three different call to action CTA sections designed for Webflow. These are designed to help increase your conversation rate and drawing attention to important call to actions on your Webflow site.

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

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

Using Webflow's new blending modes this text effect on scroll becomes apparent of the capabilities of blend modes.

Here's a large demonstration of fancy custom cursors for your Webflow site. This allows you to add a huge number of different custom cursors, or helps you understand how to add custom cursors to your Webflow site.

Here's a unique contact form designed as a chat widget in Webflow. Perfect for simulating a chat widget on your site without paying hefty fees. This gives the user a feeling of a live chat element that's hooked up to Webflow's native forms.

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

A fun and clean hero and menu loading interaction in Webflow. When a user loads the page the text appears to load at different intervals, move around and then eventually load the entire page including the menu. There's a scrolling text marquee at the top of the page, parallax style scroll interactions, a menu with slide in interactions and much more. This was built using all native Webflow interactions and was built with the Finsweet client first framework and is fully fluid responsive.

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.

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

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.

A stunning membership pricing table perfect for your Webflow site. This pricing table is based on a revised Flowbase design with unique hover interactions, removed/cleaned up class names, updated page copy, new font sizes and memberstack integration. This utilizes an orange and dark blue color scheme, 3 column pricing table with a header.

A colorful pricing plan design table for your Webflow site. Easily copy and paste this design to your Webflow site and add a pricing page in no time.

A demonstration of how to create a magnify on hover image effect on Webflow. This is built entirely with interactions and requires no custom code. Please note that this method only works on desktop and will not provide the zoom effect on mobile.

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.

A smokey button design with interactions and hover state animations.

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.

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

A way of creating a 360 degree spinning image via SpriteSpin

Want to add a static TV background effect to your Webflow site? This effect was created in Webflow using only an image and an animation to achieve the effect. There's no custom code or any other trickery going on other than Webflow's native interactions and designer.

Create a seamless page transition for your pages in Webflow. Using just a small snippet of custom code you can allow the page time to complete an exit transition with an intro transition on the new page. Set your links to preload your pages for even faster performance.

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.

A two colored spiral galaxy animation for Webflow created with Three.js. This spiral galaxy spins in the background of your Webflow site and offers zoom in/zoom out functionality by the scroll wheel on your mouse.

A great way of adding draggable background maps to your Webflow site. This is an example of a topographic map of Switzerland although could be adapted to other maps. This is easy to embed 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 dynamic Webflow countdown animation powered by Webflow's native CMS system.

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 rebuild of Webflow (2020) navbar and menu that you can add to your Webflow site. A perfect starting platform for building a dynamic navigation bar and menu to your Webflow site via this cloneable.

A stunning, beautifully designed hero section for Agency's created in Webflow. This unique and free hero section includes custom cursor with masking effects, full screen slider with custom navigation dots and slide change transitions and a full screen hamburger menu.

A unique hexagon hover effect in Webflow via custom CSS. When a user hovers over a hexagon on the page a color gradient shifting animation is displayed with a fade in and fade out animation. Please note that you need to include the HTML embedded CSS for this effect to work.

Here's a full screen menu navigation with animations and interactions in Webflow. This is a great way to easily add a menu/navigation to your Webflow site. This was comprised of three components during the build process. First, an image wrapper with an image inside of it. Second, the blue background and third a right wrapper with the menu items inside of it. The image wrapper and right wrapper are both 50% width within the menu. The width of the blue background is 150% so it has a quicker animation as it scales in. By having separate wrappers inside of the menu wrapper the scaling effect can also apply to the image, and the blue background as well as individual animations to the menu items. The menu trigger also turns into a close icon on click and then back to the hamburger button.

Here's a wonderful parallax card animation on mouse moving/hover states in Webflow. This effect uses a gradient overlay that moves with the mouse on hover, and the border moves in the opposite direction of the mouse while hovering. The text moves and rotates left and right with the mouse movements. This effect was achieved by placing the gradient overlay and border within the card wrapper. The text was placed in the bottom right of the border div using flexbox. Then, interactions were added via the mouse move over element and the elements move and rotate on the x and y axis when the user moves over the card wrapper.

A beautiful way of adding a credit card styled payment form design to your Webflow site.

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 great example of a slide in full page animated menu with mouse hover effects.

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.

An example of a form label input animation for your Webflow site. When you click on the input the label waves above the input via each individual input when it's clicked on.

Here's a highlight effect on text hover animation for Webflow. When a user hovers over text a highlight style animation interaction is displayed. This is perfect for a menu or other type of text with a unique underline animation on hover. Each menu item has a title and phrase. An underline appears under the title and the phrase at the same time and scales back on hover out. The phrase also moves a bit to the right on hover.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

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.

Three different unique footer designs for Webflow. Easily add a footer to your Webflow site with one of these three free cloneable footer designs. All footers feature unique designs and layouts with a clean, responsive design.

An interactive dark corner opt in modal for Webflow with interactions for close. Easily add a corner style, email opt in pop up modal to your Webflow site that includes all necessary interactions for closing the modal.

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

A unique button animation that displays a ripple effect on click.

A couple of easy to implement splash games for your Webflow 404 pages. Entertain your Webflow site visitors with these fun splash games.

A full screen animated navigation with hover interactions and slide in animations.

Cards with a full page transition effect upon click. Upon clicking the transition effect and full screen modal is loaded. Each card has individual colors. Be sure to watch out for the combo classes upon duplication and adding new interactions for each card.

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.

Looking to create breadcrumbs for your Webflow ecommerce CMS? If you have more than a handful of products in your Webflow ecommerce site you'll need a way to organize those. Here's a free Webflow cloneable to help you understand how to create breadcrumbs for your ecommerce projects.

A unique animation perfect for a menu item for a Webflow. This entire animation was created with Webflow's native interaction. When hovering over the item the image slides in from a rotation with a blue background coming in first. The image and background appear on the right side of the menu item.

A simple and clean example of copy to clipboard functionality via a simple jQuery code. This example also provides a tutorial of how to add this to your Webflow site. This is perfect for creating any type of copy to click text to make it easy for your users to copy and paste any information you like.

A unique effect using Scrollify.js and tabs that scroll/ease in content based on the tab selected in Webflow. Using this method you can create a tabbed section that can be accessed via click or by scrolling down the page. When you scroll down the page the selected section will become highlighted to signify which section you are currently viewing. This method utilizes Scrollify.js so you'll need to add the custom JS found within the closing body tag.

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.

Here's a way to utilize Lottie files with a scroll into view interaction and position sticky. A great way to add dynamic animations to your site with animations on scroll.

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.

A text fill on hover effect for Webflow. When you hover over text on your Webflow site it fills the text with an animation effect.

Here's a way to add a contact form popup modal to your Webflow site. Perfect for quotes, advanced contact forms and more via a pop up modal overlay. This contact form overlay includes custom open/close interactions, form inputs, submit button and shadows.

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

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 unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

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.

A fun way of upgrading your portfolio section by having a vertical scroll interaction.

Here's a way to utilize List.js with Webflow native CMS to create filtered and searchable lists within your Webflow site. This helps users filter specific information and details from a large list quickly and easily from within your Webflow site.

Add an infinite horizontal marquee to your Webflow site using only HTML & CSS. Building infinite marquees with Webflow interactions can be difficult and confusing. This solution allows you to easily add a horizontal marquee to your Webflow site using HTML embeds or Webflow's custom code. The infinite marquee is lightweight and allows you to customize the direction, as well as the speed at which the marquee is displayed on your site. Skip the confusing calculations typically required for native Webflow interactions and add an infinite Webflow horizontal marquee to your site in seconds.

A CSS technique to create animated gradient text animations in Webflow. This allows you to add extra emphasis and design to your text headlines or any text on your Webflow site. Via a custom CSS found within the HTML embed you can create this animated gradient text effect.

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 fun interaction in which a head with eyes follows the movement of a mouse on the page. This fun interaction showcases the abilities of Webflow interactions as the entire effect was created using Webflow's native interactions. As the user moves the mouse over the site the head, and eyes change location, the mouth grows and shrinks and the eyes also have another blinking interaction. The entire head was built using divs, as well as each individual element such as the ears, eyes, mouth and everything else. All three interactions rely on the page load trigger and then utilize the mouse moving in viewport functionality. Quite honestly this is one of my favorite native Webflow interaction animations that's interactive and playful.

A unique javascript powered Webflow interaction in which images change on items in viewport and a clicking sound is triggered for each new item that's centered in the viewport. As mentioned this utilizes a custom javascript which is found in the pages custom code section. This script allows you to utilize Webflow's native CMS to create a list of text items and associated images with each CMS item. As the user scrolls down the list of text items, the items that are centered in view become highlighted white, the primary CMS image is shown and a clicking sound is played. A unique and fun way of adding a little bit of JS to your site to create unique, and effective Webflow interactions.

Make your Webflow site content dynamic and fully interactive with these draggable content cards. A fun way of creating a dynamic layout that users can move, modify and play with on your Webflow site.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

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.

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

A copy and paste GDPR compliant cookie consent widget. This Webflow cloneable features a pre-made and GDPR compliant cookie consent widget perfect for your Webflow site. This method stops all scripts from loading, requires no javascript editing and utilizes Webflow's data attributes and works with Webflow interactions. You can create multiple options for the levels of cookie consents and this cloneable comes with 5 different variations of the cookie consent, one that utilizes Webflow interactions. This is a complete solution to allow you to properly validate your users cookie experience based on GDPR requirements.

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

A unique how it works horizontal scroll feature section perfect for your Webflow site. As a user scrolls down the page each section snaps into place horizontally. This effect was built entirely using Webflow's native interactions and does not utilize any other JS libraries or custom code. This effect was created by creating a scroll wrap with three different triggers for each section. As the user scrolls through each section the opacity, background color and size of each element changes. A unique approach to creating horizontal sliders within Webflow without the use of additional JS libraries or code.

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.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

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.

A unique, staggered page transition that's created via. custom piece of code that allows the page transition to happen in Webflow.

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.

Examples of creating mouse over 3D text effects with Webflow. The text letter effects is created via a Mouse move interaction and the rotate effect. All of the interactions are created with Webflow's native interactions and no custom code aside from a small CSS snippet for pointer events none.

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 way to create a horizontal scrolling slider item based on a Webflow CMS. The top one is an example of it in use, while the second one is easier to copy and paste into your projects. Just unbind it from the collection and you can then copy and paste. It's limited to four items so if you end up adding more you'll need to go in and edit the interaction. Please note that there are separate interactions for mobile, tablet and landscape.

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

A beautiful two package pricing component that includes a pricing comparison table. Perfect for nearly any site that offers two different pricing packages for clients and needs to feature a comparison table.

Here's a technique to autoplay videos on horizontal scroll in Webflow. Using the power of Youtube APIs, window scroll events and the power of Webflow interactions you're able to now create horizontal scroll animations in which videos are automatically played or paused on scroll events. There's also a delay on the play function to add a bit of an intro animation to each video by mixing the scroll into view interactions.

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

A fun mouse drawing canvas perfect to add to your Webflow background or page elements. This utilizes sketch.js for the drawing canvas which allows you to use your cursor or by touching your mobile device to draw right on the screen. You will need the custom code found in the custom code page settings in order for this to work with your Webflow site. You then have the ability to customize the colors of the mouse trail on the canvas, and can update the design and color attributes. This is a fun and interactive element that can add a unique sense of interaction to your Webflow site.

Here's a way to use CMS video backgrounds with Webflow that fit the entire container. This works with Webflow's own compressions, as well as mp4 and webm. The background videos are via lazyload and will only load on scroll.

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.

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

Want to add a copy to clipboard button in Webflow? Here's a way to create a copy to clipboard button that will copy any piece of text that you want, including links, to the clipboard. This is great when you want to allow your users to copy blocks of text, URLs, or even color codes in a styleguide.

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

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 way to achieve a 360 degree spinable book. This was built with CSS grid, responsive typography, 3D transforms and custom CSS properties.

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.

Here's a way of adding a colored fog background effect to your Webflow site using Three.js and Vanta.js. Please keep in mind that this has good browser compatibility however is CPU intensive and may have some minor issues on mobile. Be sure use only one Vanta.js animation per page.

A well designed centered pop up opt in modal for Webflow with premade gradients. This is a perfect way to add a pop up opt in modal to your Webflow site due to its premade gradient shadows which will make this modal window pop on any Webflow site.

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

A fullscreen photo accordion with hover over interactions for Webflow. This Webflow cloneable features a unique full screen accordion powered by Webflow's native CMS system. When a user hovers over each card the card expands to show a larger image and detailed information about the accordion. While a majority of the effects were created with Webflow's native interactions there is some custom code that needs to be applied.