Discover Webflow cloneables

Here's a fun example of creating an animated image on scroll effect/interaction in Webflow.

Here's a way to achieve a dual slider effect in Webflow. When clicking on the next or previous two different sliders will be triggered via the single onlick trigger via a custom button. This clicks on two hidden slider links simultaneously allowing you to maximize the slider transitions and effects.

Looking to create tabs with Webflow CMS? Here's a way of achieving tabs driven by Webflow's CMS adding extra functionality to your site.

A simple service membership sign up and login page design in Webflow. The form features a show/hide feature, preinstalled with Memberstack, styled select field, checkbox, email, name and password.

This is a styleguide combination of the Wizardry system and Finsweets Client first methodology. The Wizardry system is an em-based fluid scaling system that is combined with the first class structure and naming conventions of the client first class naming structure and conventions. The main area where the two systems are combined is in sticking with REM units for the small text elements so that on desktop they don't end up too small on low resolution screens. The design also has a mockup at 1440px and in the template the body font size is set to 1.111vw, which is equivelent to 16px for simple px to em conversion.

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

Here's a hover effect that adds a border and lines around a logo in Webflow. This effect was achieved by setting the border color to transparent on the initial state and then changing it on the hover state. Lines were placed with a width of 15px and a height of 3px. In interactions it was scaled from 0 to 1 on the x and y axis for the horizontal and vertical lines. To reduce the number of interactions required a class was created for the corner horizontal and vertical lines. Then a combo class was dded and placed the lines in the different corners around the logo. This allowed the use of only two interactions for the horizontal and vertical lines.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

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.

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

Here's a Webflow cloneable component to easily add a vertical step/process section to your Webflow site. Perfect for timelines, process steps or anything that you can think of.

A beautiful, draggable slider for your Webflow site. Some notes about the draggable slider, in mobile view it uses hammer.js for the slider. Images can be updated by changing the attributes found in each <li> item>. The view details URLs can be updated the same way. You can also change the view details and view project by changing the data-video to false. If you want it to say something else you can dive into the code and update that way.

An extensive Webflow & Figma wireframe UI kit based on the Sprkl framework and full of complete components, blocks and sections to create unique designs. This UI kit features 2 menus/navbars, 2 hero sections, 4 different feature sections, 2 blog posts, 3 testimonial sections with sliders, a clients list area, form fields, accordion, 3 footers, 2 pricing tables, 1 call to action and 3 team sections. There's also a full styleguide section which includes H tags, individual text styles for pagaraph, text blocks, text links, block quotes. There are individual text styles, color swatches. This is a great starter wireframe kit to start building and creating in Webflow faster.

Not just another vertical CMS marquee, this one is powered by GSAP and provides extra functionality. The vertical marquee provides a constant infinite loop of text. As the word comes into view a second text area updates to showcase the relevant text for the primary looping marquee text. A great example of utilizing GSAP to add increased functionality to an otherwise normal marquee. This also utilizes a bit of CSS so be sure to not overlook that when you are adding this to your site. You can customize the script to your liking and increase or decrease the number of items visible and the speed of the looping.

Here's a way to use Webflow's native CMS system for star ratings on your Webflow site. Unlike other alternatives you don't need custom code, simply add the star rating in CMS and it'll populate the stars on your Webflow sites page.

Fourteen different testimonial components perfect for your Webflow site. These modern and well designed testimonials were created to help you add a testimonial section to your site quickly. The first variation has testimonials featured in an off centered design, the second variation showcases a simple 3 design with a primary quote and user avatar. The third variation is a large slider perfect to include a larger testimonial section to your site. Other variations included branded colored cards in a slider, a picture of the person with their company logo over their face, a large centered slider, a twitter card style, a video testimonial, tab testimonials and many other variations. This is a perfect cloneable if you wanted to add simple or complex designed testimonials to your site.

Want to add an audio player in your Webflow site? Here's a way of adding a Webflow CMS powered HTML audio player to your Webflow sites. This allows you to add standard browser designs, custom styles and designs via jQuery and much more to your Webflow projects. While Webflow doesn't allow you to host MP3 files natively there are other free external hosting options, such as Dropbox, that will allow it.

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

Here's a wonderfully designed full section testimonial slider for Webflow. Each slide has it's own transitions as well as custom slider arrows using Webflow's native slider. Perfect for adding a testimonial section to your Webflow site.

Want to build a multi step form in Webflow? This is a way to build a multi-step form in Webflow. By default creating a form you're limited to only a single form, using this method you can create a multi step contact form via a native Webflow slider.

Here's a fun example of a hover interaction for a menu or navigation in Webflow. When hovering over the links different images are displayed in the background of the site. There is also a hover underline under the text, with different colors for each link.

Here's a way to create a typewriter effect in Webflow via CSS. Popular on many different websites the typewriter effect allows a dynamic, eye catching headline or text on your Webflow site.

A unique scroll animation in which a spider crawls across the screen in Webflow. This animation was built entirely from Webflow's native interactions and the power of Lottie animations. As the user scrolls down the page the animation is triggered and then moved across the screen using interactions.

A fun way of adding an interactive halo background effect to your Webflow site using the power of Three.js and Vanta.js.

Here's a project card animation on hover in Webflow. When hovering over the image a gradient overlay and text appears on the card. Lines also animate around the image and blow the project title and below the image. The effect is achieved by placing the lines in teh correct position around the image and then setting the initial scale to 0 in interactions. The lines horizontal x-axis is set to 0, and the vertical line is also set to 0. The transform-origin for each line around the image is set so that each line animates into the correct position. Then the lines scale back to 1, and the gradient overlay and text changes from 0% to 100%.

A well designed sign up/sign in page for your Webflow site. This sign up or sign in page features a unique confirm password interaction in which appears once the password field is starting to be typed into. The sign up page features a unique rotating logo image, email field, password, confirm password, create account and custom input field states (hover, selected, default).

Custom cursor particles effect for Webflow. When a user moves his mouse over the page custom particles are shown trailing the mouse. A fun, dynamic interaction that adds some animation and life to your Webflow site. This is accomplished via Sketch.js

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 a way to create a rotating image on page scroll in Webflow. Perfect for portfolios, products images, and much more.

A free cloneable hero section that includes a scroll to reveal text interaction. As the user scrolls down the page the next section is zoomed into and the text then begins to appear. Make sure you have selected the body (all pages) and update your typography settings to 1vw for it to work.

A unique example of various text related interactions in Webflow. When the site loads each letter is gradually shown, scrolling down the page you're then presented with further interactions via the in-view and out of view interactions with offset to create a nice effect while scrolling. This is based entirely on Webflow's native CMS system. There is some custom CSS in order to have the customized Webflow CMS items and for cursor events.

Looping lines and wires on page scroll via background animation all through Webflow interactions. This interaction adds a fun background animation to your Webflow site that creates lines moving randomly in different directions on your Webflow's background. As you scroll down the size of the lines grow gradually larger.

Here are 8 navigation and menu designs perfect for your Webflow site. Various layouts all with responsive mobile friendly designs ready to go.

Here's a way to add images within text spans in Webflow. This method utilizes Webflow's designer and some custom Javascript to allow you to add images within a text span. The Javascript snippet is used to move each span-element to be a child element of it's corresponding span wrapper element. This allows you to dynamically alter the HTML structure to accomplish this technique.

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.

An image project card animation for Webflow that includes hover interactions and animations. With this effect the title and caption move upon hovering, the view project appears and moves down with an underline animation. This interaction also includes a cover overlay that moves and appears from the upper left corner on the hover state. This effect was achieved by creating a card wrapper and placing the color overlay inside of it with a position of absolute and full. Then a text wrapper was added to the card wrapper in the center with a heading, text block and view project text block. The view project text and underline were then added inside of another wrapper. The interactions had different elements move and the underline effect scale.

A unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.

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 thorough guide and technique for freezing scroll on the page on a modal popup. Closing the modal via the background click or by clicking on the close icon closes the modal and makes the page scrollable again. This is a thorough tutorial that helps understand the process, and how to implement the technique on your site.

Easy to implement looping lightbox via jQuery for Webflow. All you need to do to implement is copy the code from the page settings. Add fo-lightbox class to all lightbox elements. Publish the site to see the results as it won't work in designer. This method utilizes Webflow's native CMS for the images and the custom JS code provided in the closing body tag of the Page Settings.

Using three.js and vanta.js to accomplish a 3D interactive polygon water background effect for Webflow. This interactive background allows for a ripple and water effect to be added to your Webflow site. When a user interacts with the page the water changes views and dimensions. You can edit the following variables based on your requirements. You can edit: shininess: 150.00, waveHeight: 26.00, waveSpeed: 0.70, zoom: 0.65, color: 0x368bbe

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

Here's a large testimonial slider component with auto-transitions for Webflow. This smooth transitioning testimonial slider is perfect for any Webflow site. It transitions smoothly between each testimonial and provides unique interactions. This demonstration also includes the possibility of a video as well.

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

An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.

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

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

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

A simple CSS snap scrolling cloneable that allows you to easily add snap scrolling via CSS to your Webflow sites. This utilizes CSS and you can find this in the cloneables custom code page settings. With this custom code you can target the n parent and other nth categories to customize the snap scrolling functionality. You can add easing, the duration for the scroll snapping, the height of the items and much more. Easily add snap scrolling to your site via this snipped and skip bloated 3rd party JS libraries.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

Here are several demonstrations of mouse hover interactions as well as text page scroll animations and transitions for various sections of a Webflow site.

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 unique technique to create a text outline via an image mask technique within Webflow.

A light themed, pop up email opt in modal for Webflow. A great way of adding an interactive, opt in pop up modal for your Webflow site. Build an email list faster and easier with this free cloneable.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.

Easily build your nonprofit or charity site with this cloneable hero section in Webflow. This features fullscreen tabs layout with the ability to display large text content, a full screen menu with unique hover interactions, video lightbox and search functionality.

Here's an easy way of adding tooltips to your Webflow site using tippy.js. Simple tooltips have never been easier with Webflow by using tippy.js. To style them just change the custom attributes in the element settings. In order for this to work you'll need to view it on the published site and copy the custom code. This demonstration shows six different tool tip variations, including default hover, bottom tooltip, animated tooltip, tooltip without arrow and a tooltip that follows your cursor and finally a tooltip on click.

A pop up modal that is triggered by a toggle on the CMS collection item while also keeping the default link to the collection item on the page. The pop up modal will disable body scroll and enable when closed.

A fun, sticky div interaction for Webflow. When a user scrolls down the page each div scrolls and locks into place until you reach the last div, and eventually the bottom of the section.

A free cloneable hero section with blue and white fonts. Includes buttons, social media links and a pre-made menu.

Here's a clean popup modal that includes a slider for your Webflow site. Easy to implement and with cookies you can display the popup once.

Fullscreen unique loading animation for 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.

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

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

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.

A black and white styled subscription form login for Webflow. This free Webflow cloneable is a sign up/login UI with a textured background, rounded buttons, show/hide password and styled inputs.

A simple, yet elegant accordion interaction for your Webflow site. This accordion has pre-built interactions so that when a user clicks on the accordion the information is expanded and then closed on second click.

A free cloneable footer component with gradient background animations, featuring page links, social media buttons and more. For this to work be sure to check the settings and that you have selected the body class (all-pages) go to typography panel and apply 1vw for it.

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

Unique, lottie backgrounds that add a dynamic layer to your Webflow site. Static backgrounds are boring, add some flair and uniqueness to your Webflow site with lottie backgrounds.

A simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

Here's a 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 swatchbook hover interaction created in Webflow. When a user hovers over a swatch card, it sweeps out to display the card information. The entire animation and hover effect is built via Webflow's native interactions and doesn't require any custom code.

A non-boring, full width image link with hover interactions in Webflow. A perfect way to add a full width section with unique hover interactions for your Webflow site. The bottom one is the one you'll want to copy and paste and use in your Webflow projects.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

A unique 404 page design for Webflow. When a user visits the 404 page the mouse cursor creates a spotlight effect that displays an apology with 100 different languages.

Here's a fun glitch style effect for your Webflow site. With this CSS effect the entire page, text and everything will appear to glitch randomly. It's a fun way of adding dynamic effects to your site.

A 3D flipping cards interaction perfect for adding additional information to Webflow cards utilizing Webflow interactions. When a user clicks on the + sign of a card the card flips over to showcase additional information about the product. This cloneable features no additional custom code and was created using Webflow interactions. Using mouse click the card flips 180 degrees via the Y axis. This is accomplished using Z index and 3D transforms using the backface functionality. A simple, yet sophisticated flipping card interaction that's perfect for any Webflow site.

Several different text reveal on scroll animations for Webflow. These techniques use a paid GSAP plugin called SplitText was used to achieve this effect. You can find the plugin here: https://greensock.com/club/ There are three different animations demonstrated here, line animation in which each line is animated as the user scrolls into the viewport, word animation in which each word is animated on scroll, and letter animation in which each letter individually animates.

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.

Here's a way to add a live clock to your Webflow site via the power of Vue.js. Please note that the custom code section is what allows this to work properly. It's also suggested to use some type of preloader for your page as it takes a second to load the clock properly and for the code to execute.

Here's a way to create a slick slider type of slider within Webflow.

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.

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!

A scroll into view CMS driven portfolio or features interaction. Also has hover over effect.

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

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

Add a Google places autocomplete search to your Webflow site via Google places API and this cloneable. Be sure to follow the steps to get this activated within your Webflow site and working properly.

A rebuild of the Who Wants to be a Millionaire gameshow screen in Webflow. Built with some custom code.

A hero header component design in Webflow featuring scrolling text marquee and a unique image design. This design is perfect for photographers, videographers and other creatives due to it's unique slanted text effects, infinite text marquee, and unique primary image vignette.

A simple method to create video explainer tour widget in Webflow. You'll need to view the live site in order to test the experience. This method allows for a way to embed a video into projects to help create an explainer video.

A dynamic Webflow countdown animation powered by Webflow's native CMS system.

Four different magnetic mouse hover button designs. These buttons are great for a CTA button due to the stickiness of the button interaction as it tends to grab your attention and keeps the user focused on the CTA. By using the mouse hover over element interaction to create this animation which makes the cursor act like a magnet to attract the button.

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.

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

A way of utilizing sticky cards that stack on scroll in Webflow. Using position sticky and a scrolling into view interaction allows for this effect without any custom code.

A unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.