Discover Webflow cloneables

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.

A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.

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

Looking to build a quick in Webflow? Here's a guide and tutorial of how to build a Quiz in Webflow. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

A large product display for Webflow perfect for ecommerce and other product related sites. This product card features a large primary image, product image, and a call to action button.

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 a rebuild of Stripes mega menu design in Webflow. Add a unique mega menu design and navbar to your site inspired by Stripe's mega menu.

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

A real estate hero section design for Webflow. This hero features a custom load animation, call to action buttons, fully designed slide in menu/nav bar and much more. This features a JS snippet to disable scroll once the menu is open, which can be found in the home settings before the body tag.

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 highlight text or categories of like and similar nature by hover over. This is a great way to add emphasis to certain items on your site/page by simply hovering over a category or text item. This could be extended for CMS items as well and your own collections.

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 rebuild of the popular Wordle game in Webflow. This game also has a hidden Webflow mode, which when activated changes the dictionary to only include CSS, HTML and all things Webflow. The interactions, popups, word lists & attributes are all within Webflow. This rebuild is based on the same rules as Wordle, you have six tries to guess the 5 letter word. The exception being that each time you refresh the page you can keep playing as the word changes.

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

Featuring 10 different text and typography scroll effects powered by GSAP, ScrollTrigger, Lenis.js, splitting.imin.js and Scrolltype.js. Keep in mind that these effects are great but you will need to have some understanding of code in order to modify these significantly as they rely on simply the JS libraries and data attributes to apply each effect. The first effect rotates the text and highlights each letter as the paragraph comes into view. This is achieved via the data attributes as mentioned previously. The second text effect showcases each letter coming into view from a different rotation and then all combines together to make the visible text. The third effect has each word come in at different positions from out of view and then into view on page scroll. The third version unwraps each word letter by letter as you scroll down the page. The fourth effect takes each letter and has it fold up at random intervals as you scroll into view. The fifth demonstration shows each letter rotating into place upon scrolling into view. The next demonstration creates a rolling hills effect for the letters as you scroll into view. The next one showcases a paragraph in which each letter is grown from the initial position as you scroll down the page. An appear example follows this one in which each letter of a word appears to be blurry and come into focus as you scroll down the page. The next and final variation has each word come in from random directions to create the paragraph.

A dynamic info card hover interaction for Webflow. When a user hovers over the card a box moves from the title and displays a description while the image changes to color. A wonderful interaction that adds a level of animation and interaction to an info card.

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

Three different unique menu nav bar designs for Webflow. The three designs feature unique hover dropdowns, buttons and designs for your Webflow site.

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

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

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

Common elements found on mobile payment screens. 45 different variations that include just about every type of mobile payment layout you'll need.

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

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

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 easy way to add expanding tabs with interactions via Webflow. This requires native interactions and zero custom code. A great way of adding additional text descriptions to tabs and save important space on your site.

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 3D credit card effect/animation in Webflow. This 3D credit card has hover over effects as well as click interactions, on click the card flips vertically, horizontally. All of this is accomplished via native Webflow interactions and no custom code.

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.

An add to cart hover button animation for Webflow. When a user hovers over the Add to Cart button a shopping cart icon slides in from the right side. This helps users understand the action taking place on the button and helps add a new level of dynamic buttons to your Webflow site.

Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.

A simple way to add a mouse scroll animation with a dot moving from the top to bottom. This is not a lottie file or gif, this is made with interactions and divs.

Here is a free and easy way of using Google translate to make your site multilingual with jQuery.

A recreation of the Slack logo via Webflow native divs and Webflow interactions. A fun way of demonstrating what's capable with Webflow interactions and native Webflow designer. There are four different experiments of movement in this demonstration. This was built via Webflow grid and native interactions.

A full screen parallax scrolling interaction in which different sections are folded in on Webflow. This also has a subtle blurring effect to add extra design to the scroll interaction. This is built entirely from native Webflow interactions without any extra custom code or CSS.

A great category card hover animation/interaction for Webflow. Adding this effect to your Webflow site creates a custom card animation/interaction effect. When you hover over the card the circle scales up to fill the entire card with a color and then the border color becomes white. The text also becomes white to be more readable on the background color. This effect is achieved by placing an inner circle, circle border, and an icon within a circle wrapper. With interactions the circle scales up, and the border and background circle change color on hover. Each card has a unique and separate mouse out interaction so that it can revert back to the individual cards color.

Here's a way to create a custom homepage with a split and reverse scroll technique in Webflow. When someone scrolls on the page the two sections scroll in opposite directions providing a unique interaction to add uniqueness to your Webflow site.

Here's a horizontal scrolling technique with a progress bar and pop up navigation for Webflow. A perfect example of how to add horizontal scrolling to your Webflow site with a progress bar indicating how far you've scrolled.

An example of a fixed slogan/text that changes when scrolling through different sections on a Webflow site. The embedded code is compatible with all major browsers, including some variations of Internet Explorer and Edge.

Unfortunately Webflow's native component switches between tabs can be rough on the eyes and somewhat jarring. Using a bit of CSS this cloneable allows for a smooth transition between tabs with visual images by using a small snippet of CSS to override the default tab transition making for a milky smooth transition.

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.

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

Here's a way to create a custom automatic slider for the hero section of your Webflow site. This was created with the native slider component and Webflow interactions.

A fluid, morphing SVG background for your Webflow site using Anime.js. Perfect for the background of your Webflow sections, or entire site.

Here's a fun way of adding a text color invert on mouse hover effect for your Webflow site.

Here's a beautifully designed custom onboarding form to collect/update member information at any time. This could be used for onboarding, profile updating, account setup and much more.

A unique gradient hero text animation in which the text of the hero section becomes a gradient a timed interval. This technique uses Webflow native interactions and a little bit of custom code.

Have your navbar shrink on page scroll via this Webflow cloneable. Easily create dynamic navbars for your Webflow site that shrink upon scrolling down the page. Once a user reaches a certain point on the page the navbar transitions from dark to light while shrinking. This does not require any custom code and utilizes Webflow's native interactions. This utilizes Webflow's While scrolling in view for two different classes and as previously mentioned does not require any extra custom code. This cloneable is perfect for anyone looking to create a dynamic navbar that allows for dynamic changes based on the users scroll depth on the 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 liquid 3D mesh net with gradients and transitions engulfs the background of your Webflow site. Inside there are shaders and code found in the page. You can adjust the values to customize the effects of this liquid 3D mesh design.

A full size product/service slider perfect for a pricing page or features page in Webflow. This slider features a single product per slide with transition effects between each slide. Includes custom cursors, slide transitions/interactions and a well designed features section.

A simple but unique text link hover animation powered by Splittext.js, CSS and custom Javascript. When a user hovers over a text link the letters produce a splitting animation in which every other letter moves in alternating directions. There's also a sound effect that plays that's simple yet effective. This cloneable also features a mouse gesture in which a ball follows the mouse cursor location, when hovering over the text link the ball increases in size and then appears appears to text mask and invert the colors of the text that it's hovering over. If you plan on using this cloneable keep in mind that you'll need to add the custom CSS found in the custom code page settings as well as the Splittype.js script. The splittype.js script can be modified and relies on the css class .menu-link in this example. You can also customize and define the audio files in the script, although keep in mind that you'll want to host these externally. The cursor effect is built with Webflow's native interactions using Mouse click interactions.

A smooth and easy to implement jQuery accordion for Webflow. This accordion was built using jQuery rather than manually creating all of the interactions in Webflow. This is perfect if you don't want to mess around with Webflow interactions or aren't comfortable with using interactions. You'll find the custom jQuery code for this accordion within the custom code in the page settings. In this jQuery code you signify the speed of opening the accordion, close all other accordions if another one is opened, activate scroll to top for active item, the offset of that scroll and the delay before being moved to that item. You'll then update your class names based on if you updated them in your designs. Overall this is a clean and easy to use jQuery animated accordion if you aren't someone that wants to utilize Webflow interactions.

A simple countdown/launch timer for your Webflow site. This demonstration utilizes a custom script in order for it to work properly. You'll need to include the script found in the HTML embed in order for this to work properly. You'll also need to udpate the date and time to the future date/time that you'd like for it to count down to. This script allows you to customize the countdown timer to your own local date and time so that it works properly for any time zone.

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.

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

Here's another well designed Webflow navigation menu bar with dropdown interactions. This nav menu is perfect cloneable to jump start your Webflow site builds by providing a fully functional, mobile friendly mega menu navigation to your Webflow site.

A unique demonstration of OGL manipulating a sites background image on hover. Be sure to check out the custom code to ensure that this work properly on your Webflow site.

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

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.

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.

A clean and unique interactive CMS slider for Webflow. This slider features a variety of unique features including a mouse hover over effect in which text gravitate towards the mouse, a bubble radar effect and unique slide transitions for each slide. This was built with Finsweets client first framework and offers fluid responsiveness design.

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

A method to create more dynamic and interactive experience by allowing your users to view a simple cursor animation powered by GSAP and Cuberto Mouse Follower. This utilizes custom code so you'll want to make sure you check the pages custom code section for stylesheet and JS code. This combines the power of GSAP and mouse-follower.min.js to create a smooth mouse following animation. With this you can modify the MouseFollower scripts speed, skewing and skewingText functionality to your specifications. Unlock the power of GSAP powered dynamic site elements for your Webflow site today.

A fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

Here's a way to add a show/hide password input field in Webflow. Clicking on the eye icon displays the password and it's accomplished via some custom jquery code to change the input type.

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 demonstration of using Swiper.js in a hero section. This is also mobile friendly by becoming full-width.

Here's a dark design full width large accordion with interactions for Webflow. An easy way to add a huge accordion to your Webflow site.

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.

Here is a unique button with hover animation in Webflow. When you hover on the button the border outlines in a cut from two different points which makes the line look segmented. When you hover over the button the lines seem to move in a clockwise fashion and then reverses on hover out. This was achieved by placing two skewed div blocks at the top and bottom of the button with. the same color as the background. The div block was placed precisely on top of the button border. This makes it look like the border is being cut. Then those to blocks are moved left and right on hover to make it seem like the lines are moving. It's a subtle, yet unique effect that adds an interesting effect on hovering on a button.

An expiremental hamburger menu for Webflow with the interactions. This is a full screen, animated hamburger menu/navigation that you can easily add to your Webflow site.

Five unique designs to showcase your Instagram feeds in Webflow. These examples utilize a combination of custom code and Webflow interactions to make the magic happen. Although a majority of the movements are controlled by Webflow interactions. A great way to liven up your Instagram feeds on your Webflow projects. Tie this into automating the importing of your Instagram feeds to Webflow using Zapier or Make and this can be a fully automated and up to date instagram feed.

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.

The starter style guide project for the Relume Library. This project contains a style guide with the necessary pre-built classes. There are no pages, no layouts, and nothing to delete. This simply allows you to get up and running with Relume, easily. The Relume Library uses Finsweet's client-first Webflow style system. You can find the prebuilt page under Drafts/Style Guide. The styleguide comes with Headings (H1-H6), heading classes (heading-xxlarge), Paragraphs, Links, Block Quotes, Lists, text sizes, text weights, letter spacing, line heights, text styles (using custom Global CSS), text alignment, rich text, colors, background colors, premade shadows, UI elements, buttons (with icons, alternates, icon locations), form elements, icons, image wrappers.

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

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 wonderfully designed pricing comparison table with everything you'd need to showcase and feature a pricing page on your site.

A triple pricing table design for your Webflow site. This component includes features comparison, primary/focused table, hover over effects and much more. A modern design that features shadows and rounded corners and 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.

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.

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.

Here's a way to achieve a looping dotted line in Webflow. Easily add this to features sections, connecting two divs or items together and much more.

A modern and yet sophisticated multi-step quote request form for Webflow. This multi step form features a status indicator for which step you are currently in with the form. The form was created using Webflow forms and embedding various native Webflow sliders within the Webflow form. This method does NOT require any extra custom code or HTML embeds to work properly and is a perfect starting point for any multi-step form. The form utilizes checkboxes for large options on the second portion of the form, there are also custom designed radio buttons, and a final confirmation page to submit the form. Overall this is an excellent cloneable if you plan on adding multi-step forms, contact forms or questionairre's/onboarding pages for your Webflow site.

Here's a unique team, about card hover animation for Webflow. When someone hovers over the profile image the image zooms out, and the name, details and a button is then displayed.

A fancy, full-screen responsive and mobile ready menu navigation. The custom open and close animation is with an animated background gradient that adds some uniqueness to the menu itself. View the youtube tutorial here:

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

Here's a work around to use .webp files in Webflow. The trick is to upload your webp files as .webp.txt in the asset manager. Then you can use a <picture> tag and now you've got native Webp files hosted in WEbflow.

A free Webflow cloneable for a social sharing button interaction. When a user hovers over the button it expands to showcase 4 different social sharing sites, Behance, Dribble, Instagram and Twitter. This social share button was created solely from Webflow interacations and is a fun way to add social sharing or a contact to your Webflow site.

Here's a clean, beautiful language toggle button that can be implemented on your Webflow sites. There are hundreds of flags that you can match with any language you may need.

Here's a way to utilize a URL query parameter to trigger different styles, titles and more in Webflow. In this example adding a custom URL query parameter and some custom script you can link to a FAQ page that then updates the page title, color and the topic based on the query parameter you select. This allows for pages to be "dynamic" and linking to pages with unique attributes even though the content of that page is the same.

Here's a tutorial on how to integrate Hubspot to Webflow in the four most popular ways, with full tutorials and examples. These include Webflow to Zapier to Hubspot. Webflow with Hubspot HTML form embeds. Enterprise Hubspot to Webflow and finally Webflow and Hubspot tracking code integration.

An amazing, sweeping slider interaction perfect for any Webflow site. The interactions have a custom scroll indicator, automatically transitions slides and provides a unique sweeping transition between slides. Perfect for a hero or landing page in Webflow.

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

A 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 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 simple and easy to implement page loader using all of the letters of the alphabet in Webflow. Everything is accomplished with Webflow interactions and zero custom code.

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.