Discover Webflow cloneables

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 of adding custom popup modals for video and content to your Webflow site. These custom content modals utilize custom code to disable scrolling when the pop up modal window is open. This helps prevent user confusion and scrolling of the site when these modal windows are open. For the video popup additional jQuery code is utilized to stop the video from running in the background when the window has been closed.

Here's a custom advanced carousel slider driven by Webflow's native CMS system. This slider carousel is entirely responsive and within the CMS options has the ability to activate the item to be added to the slider. A wonderful slider with unique transitions and the ability for two images, and relevant descriptions to be displayed.

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.

Various demonstrations of how to create magnetic elements in Webflow. This method is typically used for buttons but can be implemented on a variety of objects using a single interaction and class. In this demonstration a parent class called is-magnetic has an interaction tied to it that allows the items in this class to be "magnetic" and drawn to the cursor. A

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 drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

A simple, easy to implement pop up modal for Webflow. Instructions on how to make it display only once, rather than on every page load. View the full instructions here: https://youtu.be/uSgSoEQD1vs

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

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.

Add a back to top button with a progress bar indicator to your Webflow site. This unique feature allows you to add a back to top link with a unique progress bar indicator which adds a nice effect. When a user clicks on the back to the top they smooth scroll back to the top rather then snapping back immediately. This technique uses two different HTML embeds in order to work properly.

Two examples of creating modal windows using Webflow's native CMS system.

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

Here's a basic example of utilizing Swiper.js for a slider within your Webflow site. Swiper.js is great for adding a draggable slider with a variety of effects within Webflow.

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

Now you can utilize a rich text editor for Webflow forms via a little bit of custom code and JS. Easily add this functionality to your Webflow site to make even richer forms.

Here's a walkthrough and tutorial of how to build a contact form in Webflow. View the tutorial here: https://www.youtube.com/watch?v=H8-fbOJpC5I

Power up your Webflow tabs through a timed, auto-rotating tabs feature. This is perfect to add emphasis to your Webflow tabs and more specifically demos, explainers, testimonials and just about everything else you can think of. This is a super simple script that adds auto rotation to Webflows native tabs.

A unique interactive glassmorphism that follows the mouse cursor on the Webflow site. This dynamic glassmorphism Webflow technique is a great way to add 3d transform effects to your site.

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.

An amazing full page multi image slider for Webflow. This slider is built with great interactions and transitions and loads multiple images per slide. Perfect for portfolios, architecture images and much more.

Create a popup iframe modal in Webflow easily with this cloneable. This cloneable allows you to you easily create a popup modal of an iframe URL, perfect for portfolios or pages in which users do not need to navigate to another page. Keep users engaged and on your site while allowing them to preview portfolio sites and other similar projects.

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

A tiny vanilla JS clock, modify using attribute and can be configured with time zones for Webflow. This technique is powered by Clock.js and utilizes Webflow's native custom attributes to determine each countries current time. This allows you to modify the timezone by simply adjusting the Webflow custom attributes for the text content to update the clock based on the timezone you require.

A Webflow pricing table component featuring tabs on the side for different pricing packages.

Here's a fun text effect in which the text fades away on mouse hover in Webflow. A great way to add a dynamic animation interaction to your Webflow site.

An example of integrating locomotive scroll integration in Webflow

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 simple yet effective way of adding a countdown timer and clock to Webflow. This example utilizes some custom code and Webflow's native CMS to create a count down timer clock on your Webflow site.

Another cloneable pricing component created by Flowbase. This version includes tabs for three different variations of pricing.

Here's a dynamic pricing table that updates the pricing and currency symbols based on the selected currency in Webflow. A great way to show different pricing based on the currency selection of your users.

A wonderfully designed, non obtrusive cookie consent modal window in Webflow. A perfect and easy way to add a beautifully designed pop up modal cookie consent window to your Webflow site.

A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.

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.

A style guide framework built in Webflow so that you can easily build and create a style guide for your projects/clients in Webflow. This framework lays out all the elements, tools, components and resources used to develop them. This is based on the client-first methodology by Finsweet.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

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

A beautifully designed pricing page for recurring services in Webflow. The pricing page template has monthly and annual toggle interactions, additional perks/plans/discounts information, an accordion FAQ, footer and navbar.

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.

A right side menu for Webflow that slides the menu in from the right hand side on click. This menu features all of the interactions required to create a Webflow menu. When the user clicks on the hamburger button the menu slides in from the right part way on the screen. There's a menu item hover interaction which has a highlight effect that grows on hover and then fades out on hover out.

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

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

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

Here is a wonderful collection of 10+ Webflow FAQ layouts and components ready to use on your Webflow site. Included in these are accordions of varying style and design. There are versions with pop-up modals, dropdowns, expanding cards, fully expanded FAQs and just about everything you'd need to add an FAQ to your site.

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.

An example of how to create a sticky navigation sidebar in Webflow. Perfect for blogs, article pages or other sites that require a sticky sidebar in Webflow. In this demonstration there are three examples of sticky sidebars to showcase that multiple can be added to the same site.

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

This form us using usebasin.com as the form processor while still using Webflow's native success and error messages, waiting text and redirects.

Here's a way of adding a custom, target style cursor to your Webflow site. This cursor creates both a vertical and horizontal line on the page with a red dot, much like a target/red dot on your Webflow site.

Get more insight into why your clients are cancelling with this cancellation insight form for Webflow. This cancellation modal form data is submitted directly to Webflow, meaning it's easy to export and analyze the results at any point.

Here's a unique and fun button with border animations in Webflow. Initially the button looks rather basic, however with a few line animations it makes this button really pop. The lines were placed within wrappers and set the wrappers to an overflow hidden. The move animations to each line was added to control which direction the lines came in from with the different hover states. Scaling the lines doesn't allow for transform-origin to be changed on the different states, hence why the move option was used instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of a button with a position of absolute.

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 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's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.

This is a revised version of Flowbase's pricing table with fun hover interactions, removing/cleaning up class names and updating the page copy. Other changes include changing of font sizes and adding the Memberstack functionality to all of the buttons. This is a two plan pricing table with the focus getting a user to join for free while still showing the unlimited paid plan. The page also includes a feature table below the pricing table.

Here's a way to add some animation to your text elements within Webflow. The outer line of the text is animated and creates a fun effect for your text.

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

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

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

A fully functional pricing page similar to Notion's pricing page. Payment gateway used is Stripe and the no-code pricing & checkout provider is servicebot.io

Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.

Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.

Here's a full page iPhone mockup design for Webflow. A great way to add an iPhone mockup design to your site with all of the elements already designed for you.

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 fun and unique way of adding scroll interactions to your Webflow site. It is slightly difficult to edit the contents of the slides, however you could make these CMS items to make it easier to edit the content within each slide.

Here's a way to add GSAP velocity scroll effect to your Webflow CMS image library. Using this technique the images create a shredding load effect which is based on the Webflow native CMS library and images found in that library. A good demonstration of how you can use GSAP with Webflow CMS.

A custom slider for multiple images per slide. This allows you to maximize the number of images, or items for each individual slide. Each slide has a transition preview effect and a fanning out animation upon the transition.

Unleash the power of GSAP Scrolltrigger toggle in your Webflow projects. This allows you to create complex, and yet lightweight effects powered by both GSAP and Scrolltrigger. This CMS powered GSAP & Scrolltrigger effect showcases a hero section in which three different slides transition between each other based on the users position on the page. After the initial hero the second section features different words and images that ease in and out based again on the users position on the page. These sections are utilize Webflow's native CMS to power each slide. You will find the custom code that powers this under the pages custom code settings and it allows for you to customize the items, the trigger element, the timeline and mobile friendly attributes.

A full UI kit for your next Webflow site. This includes just about everything you could ever need, including accordions, breadcrumbs, buttons, checkbox, code snippets, data tables, date pickers, dropdowns, file uploaders, forms, loading elements, lists, pagination, progress indicator and much much more. This is a great source for just about every type of element you'd ever need for your Webflow projects.

Add a rotating 3D style tunnel to your Webflow sites background via this HTML embed CSS technique.

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.

Here's a unique, 3D infinite scroll marquee for Webflow. To create this effect two blocks are created within a wrapper with a perspective applied to it to create the 3D effect. There was also a self perspective applied to the block themselves which seems to have altered the position of the angles. Then text was added to the blocks inside of each the left and right block. The overflow was set to hidden for both blocks so that the text would move in and out of the blocks. The animation the text moves from 100% to -100% on the x-axes. The duration of the text movement was set to 5 seconds. The second text has a delay of 2.5 so that the animation because the blocks have the same width. Easing is set to linear so that the effect doesn't effect the time and it looks like it moves through both blocks.

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

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

Here's a way 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.

Add a CMS driven draggable slider with smoothing to your Webflow site. This slider offers the ability to slide with a trackpad and also has mobile smoothing. There's a small webkit code that removes the scrollbar as well.

A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.

Never change the copyright year or other year on your Webflow site again. With this simple javascript code you'll be able to have years automatically update on all of your Webflow sites. Simply add the custom code found within the body tag section in Page settings, identify the div, and you're all set.

A full page CMS scrolling interaction that's perfect for portfolios and product driven websites in Webflow. Built with GSAP this scroll interaction creates smooth scrolling interactions between sections on your Webflow site. Be sure to add the custom global styles embed symbol as well as the custom scripts in the head and body section.

Three different simple page transitions for your Webflow site. These are simple transitions achieved by barba.js. The script can be found on the home page script.

Here's a way to add a image splitting interaction on hover in Webflow. Using a grid and clip path to make this interaction happen. With this example when someone hovers on an image, the image opens in half and a text description is shown.

Three amazingly designed call to action section scroll interactions created in Webflow. These call to actions are perfect for the bottom of your Webflow sites to create eye popping dynamic elements that draw the users attention.

A full UI kit provided by Kazbek for Webflow. This includes nearly all of the components and UI items that you may need for a site, including navbars, footers, contact forms, pricing, payment icons, FAQ sections and much more.

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 unique GSAP Webflow cloneable in which items move from one place to another location based on the page scroll. This cloneable utilizes GSAP, Flip.js and Scrolltrigger and does not rely on Webflow interactions. There is also some minor CSS via an HTML embed. As mentioned this cloneable features objects that move from one location to another as a user scrolls down the page. It relies on data-attributes for the origin and then target element. There is some customization available via updating the custom script found in the page settings.

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.

Here's another way to add full page scroll snapping functionality to Webflow via Fullpage.js. In this example you can see full page, smooth snapping section on scroll. Please note that you'll need to add the custom code found within the page settings found in both the header and body sections.

Power up your Webflow tabs by using a CMS powered solution. This enables you to easily create CMS powered native Webflow tabs with Finsweet's attributes. In order for this method to work you'll need to add the custom code found in the Page Settings head section as well as refer to Finsweets documentation.

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

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

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 unique button design for Webflow with hover interactions. This purple styled button features a hover interaction in which the purple arrow expands and grows when hovering and then shrinks back to the original design on hover out. All of the button animations are built with native Webflow interactions.

A unique button design in Webflow with hover over interactions. When a user hovers over the button the button fills from right to left and on hover out the fill moves from left to right creating a unique Webflow button via native interactions.

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 is a wonderfully designed blog card animation on hover in Webflow. When a user hovers over the card the image rotates, a color overlay appears, and the date of the blog post appears. The summary panel below also moves up. When hover over the read more button the background and text changes color. The way this was achieved was by adding all the elements and then animated via interactions. for the image it was placed inside of an image wrapper and set the overflow of the wrapper to hidden. The width and height of the image changes to 150% so that when it rotates it is still visible inside of the wrapper.

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.

A fun way of adding a text color changing effect to a headline or other piece of text in Webflow. This technique uses Webflow's native interactions to achieve a color changing text effect in Webflow. This demonstration as two different methods, one which each text changes colors at a time and the second in which all texts change color and then revert back and loop again.

A demonstration of creating moving and shrinking labels in Webflow. When a user focuses on the input field the field label moves out from the input field and above it. This method does not use Webflow interactions but a custom script found within the page settings.