Discover Webflow cloneables

Here's a way to add an interactive, draggable 3D model to your Webflow site. Find the full video tutorial here: https://www.youtube.com/watch?v=M0Xd4wGfn_E

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.

Ever wanted to add an infinite text rotation/changer to your Webflow site? This infinite text rotation technique allows you to have a long list of words that rotate in from bottom to the top and then repeat endlessly. This includes an infinite loop version and a finite version that only runs once. This is fully responsive and easy to customize.

A full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.

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.

Creating a proper Webflow site should start with brand guidelines and a style guide. This ensures that your sites brand and feel stays consistent from the start of your Webflow site build. This is a great resource and UI kit to build your own styleguide and brand guidelines.

A tag/tooltip hover badge perfect for your Webflow site. When yo hover over the colors, individual tags/descriptions follow the cursor on your Webflow site. Be sure to add the HTML embed code to your sites for this to work. The elements are all created by created an element ID and associating the HTML embed script with the element ID.

Here's a demonstration of a call to action card with a hover animation in Webflow. The hover animation appears at an angle when the user hovers over the card. This is a great way of indicating that the card can be clicked on and visit another page. To create this animation a card wrapper is created with all the elements in it. Then a card wrapper was set to relative and a div block was placed inside of the card wrapper and set the position to absolute and 50% width and 120% height so that it could be angled without losing the height at the top. Then this div was moved 100% to the right from the card. With interactions the div was then rotated -10 degrees. An arrow as then placed in the slanted div block and rotated the arrow 10 degrees to offset the -10 degree angle. The border color also changes on hover.

A well designed, three column pricing page cloneable design that includes a 3D effect, features section and much more.

A full page kinetic slider for Webflow. When a user hovers over the slides the images the images morph and act kinetic.

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

This demo showcases a unique card flipping animation on hover in Webflow. In this effect a panel rotates in from the left to reveal more information about the image, or post and the image slides to the right to make room for the flipping panel. The effect was achieved by placing an image wrapper and content wrapper with a child perspective added to it. The content wrapper is set to 50% within the 3D wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to overflow of hidden so that the image slides to the right you don't see it beyond the wrapper. Interactions were created via rotation of the content wrapper -90 degrees to 0 degrees and moved the image to the right 50%.

A sign up page inspired by Dribble for Webflow. This cloneable sign up page includes Google login button, Twitter login, name, username, email and password. The username, Google and Twitter functionality are a beta of the Memberstack 2.0. The form includes unique designs with hover states, active states and more.

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

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

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

Add a click to text functionality to your Webflow site. Using this functionality when someone clicks on this link it'll open their default text messaging app to send a message via text message. Please note that this uses an HTML text link embed in order to function properly.

A fun way of adding a canvas cursor tracking element via HTML canvas to your Webflow site. With a bit of JavaScript you can add a fun cursor tracking effect to your Webflow site. Be sure to add the custom JS code found within the page settings for this to work properly.

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 unique headline animation for Webflow powered by Anime.js. The headline text sweeps in from the bottom one letter at a time and after displaying the line sweeps out one letter at a time with a fading effect. In order for this effect to occur you'll need to be sure to add the custom code in both the head and closing body tag in Page Settings. This is perfect for a preloader page or temporary scrolling section.

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.

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

Here is a way to add a countdown clock component to your Webflow site. This simple script will take your chosen date and provide a countdown for the days, hours, minutes and seconds. Perfect for a coming soon page, product release page and much more.

Allow visitors to preview a site thumbanil on external link hover in Webflow. This feature allows you to get a preview of the site that you're linking to without having the user leave your site. It works by extracting the external links on page load, it then grabs a screenshot of those sites and reveals it on link hover. The card's position is calculated using custom code and thus works with inline links and link blocks. Just change the external link and preview will be updated automatically. Replace the demo screenshot API with your own in your live builds.

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.

Add a dynamic pricing table with a range slider to help your clients find the best package for them. This is using rangeslider.js. The table is NOT responsive, although shouldn't be difficult to make it responsive if you wanted. Be sure to add the custom code to get this to work properly on your 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.

Background swirl animation via canvas backgrounds in Webflow. This method is created via a custom JS file found in the closing body tag of the page settings. This utilizes the unique javascript text "hack" allowing you to host JS files as text files in Webflow and calling that text file as a script.

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.

Five different mega menu navigation designs for Webflow. This helps you add unique mega menu designs to your Webflow site that feature different mega menus dropdowns perfect for your site.

A full screen parallax menu/navigation featuring mouse interactions.

Easily add an Instagram feed to your Webflow site with these premade Instagram feed designs. Twelve different Instagram feed design components allow you to easily add your latest Instagram posts to your Webflow site. Keep in mind that these are simply the design components and do not include the code to work properly. You'll either need to use a 3rd party tool or manually add your instagram posts yourself. These Instagram feed designs feature a variety of different styles from masonry grids to stacked and Instagram style cards.

A unique way of showcasing your logo front and center and have it move up on page scroll in Webflow. This adds a fun dynamic element to your Webflow site and draws the users attention in. This interaction was created entirely from Webflow's native interactions using the While page is scrolling functionality and size, move, scale, opacity and more. This requires no additional custom code and can be cloned and setup quickly.

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

Here's a way of utilizing data/information from Google sheets within your Webflow site using the Javascript v4 API. This allows you to maintain the design of your site within Webflow but use Google sheets as the CMS/backend of the information on your site. Please note that this does not work on the demo on this page but will load when viewing the page itself. You will need to generate your own API key and the google sheet should be the public link of the sheet used in this project demonstration.

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.

Here's a unique clickable process/steps section in Webflow. Whenever someone clicks on each step an interaction triggers that displays the number as well as further information about that specific step. Simply edit the content, update the interactions based on your requirements and enjoy a unique steps/process section on your site.

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

Another great 3D card hover effect created in Webflow. You can change the angle from the transformations and you are also able to change the layout if you wanted.

Interactive and inline 3D icons built with Spline and Three.js. A perfect way of creating interactive inline customized icons built with Spline and powered by Three.js

Six different call to action designs for your Webflow site. An easy way to add important call to actions to your Webflow site via a cloneable.

A unique way of adding a social share button to your Webflow site. When a user hovers over the button the social sites sharing icons are shown. This method allows you to maximize space on your site and offer a unique approach to social sharing your Webflow content.

Webflow does a decent job of allowing us to override symbol content, although you are still stuck with styling. This method/workaround allows you to override the symbol styling as well. This is great if you want a toggle between a few modes (dark/light) or different theme styles without having to maintain extra symbols. This works by linking a hidden text block to an override field to specify a combo class. Custom code is then used to define the combo class to the symbol relative to your trigger. This allows you to override the styles for the trigger parent, sibling or child elements. Please note that this only works on the published site.

Here's a way to create a page load animation in Webflow in which circles appear at different intervals to create an animation effect. This entire animation was built using Webflow's native interactions and doesn't require any custom code to create it.

A unique expanding portfolio hover interaction built completely with Webflow interactions. When a user hovers over these portfolio items they expand to showcase a larger version of the image. This cloneable was built using entirely Webflow's native interactions and does not require any additional code or HTML embeds. The Webflow interaction uses the Element trigger on mouse hover targeting the class so that all classes will have the same Webflow interaction. When the user hovers over the size of the item expands, on hover out the item returns to the original state. A clean, lightweight solution to create expanding portfolio items in Webflow.

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

Horizontal vertical marquees are easy to create in Webflow. However vertical infinite scroll marquees aren't as prevalent. Here's a way to create a vertical infinite scroll marquee in Webflow. This example even includes a masking hover over effect for each different scrolling marquee. Each marquee is built with native Webflow interactions and no custom code.

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.

Here's a way to block internet explorer visitors from your Webflow site and provides a module that encourages them to download a more popular and up to date browser.

Here's a demonstration of using Dribbles API to display shots from yours, or another Dribble account on your Webflow site.

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

A methodology to create a variable font based on the mouse movement on a Webflow site. This technique relies on custom CSS and JS for this to work which can be found in the HTML embed of the site. A good demonstration of creating dynamic variable fonts in Webflow.

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 horizontal scroll interaction built for Webflow using native Webflow interactions. This horizontal scroll allows you to use as many panels as you'd like and the panels don't need to be the same width or unit type. This horizontal scroll utilizes the While scrolling in view element trigger, and then utilizes only the move scroll action to complete this Webflow interaction. To add other panels simply add a new panel div in the track-flex section.

Here's a way to achieve a unique hero section using grid and the Wizardry method in Webflow.

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.

Product cards become sliders when on mobile resolution technique in Webflow. Here's a fun way to add a dynamic element to your site for mobile users.

A way to implement a parallax scroll effect on your Webflow site.

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

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.

Another way of adding unique interactions and animations to the menu loading of your navbar. This demo showcases a grid menu animation on click. The menu wrapper consists of 2 grids, one 3x3 and another smaller 4x8 nested grid on the lower left corner. The panels scale from the bottom to the top and left to the right on click. The text also appears staggered motion from bottom to top. On close the text fades out and moves back down, and the menu panels scale back to 0 in a staggered way.

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.

A unique collapsing text Webflow interaction that utilizes native Webflow interactions and custom CSS for the text shadow effect. This is perfect for hero sections or areas where you'd like to add unique text animations. This utilizes Webflows page trigger interaction with when page starts loading. Using a few different divs and two text elements you're able to produce this looping effect on your Webflow site. A powerful yet easy to implement interaction that will make any Webflow site pop.

A free membership splitscreen signup page for Webflow. This cloneable features a sign up page with all of the necessary elements you'd need to create a perfect sign up page in Webflow. This includes sign in with Google buttons, Facebook, first name field, last name, email and password. Each input field has unique states (hover/active/selected) and the entire page is well designed and laid out.

Four different custom button designs for your Webflow site. These custom, animated buttons already have the necessary interactions to make them dynamic and interactive. A variety of hover states effects can be found in these 4 different button designs.

Here's a well designed cloneable blog template design perfect for your Webflow site. It features a sticky sidebar and well designed content divs with just about everything you'd need for your blog page. Including other posts, individual blog page, call to action and email opt-in/subscribing, categories, sidebar and much more.

A native Webflow CMS driven slider that uses Splide.js to create unique next/previous buttons and transitions. Splide.js is a popular slider alternative that many Webflow designers use to customize their Webflow sliders beyond the capabilities offered via the standard slider functionality. Be sure to add the custom code found in the page settings for this to work properly.

Looking to add animated play buttons to your Webflow site videos or other media? Here are a few different variations of animated play buttons. One variation repeats the play animated button, and the other animates on the hover over state. All of these are accomplished via Webflow interactions.

A unique way of displaying a falling leaf via scrolling interactions with Webflow. This was not built with any lottie animations however was built entirely from one large Webflow native interaction via the While page is scrolling functionality. The leaf sits within an invisible circular track that rotates and guides the direction of the leaf. A great example of what's possible to achieve via Webflow's native interactions and a bit of ingenuity.

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 way to add a non-CMS item to a cMS collection list in Webflow. This can be positioned at the start, middle, end or at a specific position via a number. A great way to add non CMS items into a native Webflow collection list.

Here are a collection of 16 different footer designs, all responsive and fully customizable and ready to be added to your Webflow sites. A great way to add a footer to your site quickly.

Here's a way to have a CMS driven music player, with download functionality for your Webflow site.

A smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

Here's a way to add zoom in images on click via a native Webflow interaction. Custom code is involved to disable/enable the body scroll only. Be sure to copy the custom code for the body scroll toggle on modal pop up. This is perfect for showcasing a product where zoom-in is required to view the close up details of that product. The interaction works only for desktop and on mobile it will only be normal image without the zoom in effect.

Here's a unique, 3D mouse interaction in Webflow. In this example a 3D box spins based on the mouse within the viewport of the Webflow site. It's a simple 3D box that rotates around the center of the viewport as the mouse is moved around.

Box shadows aren't the easiest thing to create in Webflow. Here are 6 different box shadows ready to go and to be added to your projects.

A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.

Well designed card hover transitions/interactions for Webflow. When a user hovers over a card the card changes colors, moves the content up, removes the icon and adds a link indicator. Perfect for dynamic cards/feature sections within Webflow. This was created with minimal hover interactions.

Here's a fun, mouse hover effect that creates a shimmer/halo on the 3D card when the cursor hovers on it in Webflow.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.

A unique way of erasing content via a hover over effect with your mouse. Also includes a touchable version for tablets. Be sure to add the custom code to your site to ensure that the black overlay is properly shown.

Here's a way to add a counting timer in Webflow with a slider effect. This is a combination of Webflow interactions, CSS animations and custom JS. Since this is a custom CSS animation, it is completely based on attributes and more importantly modular. When scrolling down the boxes rotate out of place and create a fun interaction.

A unique GSAP Webflow cloneable in which items expand on hover with a unique transition. In this example there are three vertical columns, when hovering over one of them it expands it into view and closes the other opened vertical column. This is accomplished via GSAP & Flip.js which can be found in the custom code section of the page settings. The code is customizable to target different classes and then adds or removes a class to those other classes. Flip allows you to customize the duration and the easing. In this demonstration there are three videos and three tab divs. Do not get confused that these are normal Webflow tabs as these are just the names of the div. Be sure to check out this use case of using GSAP, Flip.js and Webflow together to create a unique interaction.

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

This is a unique interaction in which images reverse movement based on mouse location in Webflow. There are two images facing opposite directions on both sides of the screen. When ou move your mouse on the x axis the images get further and closer apart. It's a very simple effect but can be modified to create endless opportunities. This used two identical images to save on load time and one was flipped horizontally on the y axis. Both images are set to overflow hidden. Then in interactions a mouse move in viewport interaction was applied to both images and they move on the x-axis.

Here's an example of how you can integrate Mapbox into your Webflow project to help create an interactive storytelling experience. This is a great way to create an immersive map interaction while scrolling to different sections on your site. Perfect for giving the history of a city, providing a guided tour and much more. You will need to replace the Mapbox with your own API credentials. Unfortunately this isn't optimized for mobile yet.

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

Five different variations of an image appearing when hovering over a link, or item. In the first example when a user hovers over the item the image stays in line with the text although slightly follows the users mouse. In the second version the image follows but at a different section and with a different image dimension. In the third example the entire div has an image appear from the bottom and changes the background of the item. The following demonstrations changes the entire background of the page to an image. This demonstration and cloneable was built entirely from Webflow interactions and doesn't use any extra custom code or HTML embeds. These examples rely on the Mouse move over element for the triggers.

A unique demonstration of the capabilities of Webflow interactions to create an animated solar system. This demonstration utilizes primarily Webflow's native interactions and rather simple interactions to demonstrate the rotation of the planets in our solar system. What seems like a rather confusing and extensive site is built using Webflow's native interactions and simple timed rotating interactions.

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

A great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

A great way of adding a date/calendar picker to forms or other elements within Webflow. Provides the essentials to get it added in 30 seconds and easily configurable based on your own style. Inherits the <body> typography. Please note that the date picker does require custom code found within the Page Settings. This utilizes Datepicker.js to create the date picker and the styling allows you to further customize the styling.

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.

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.

An easy to implement tooltips for your Webflow site. With this cloneable you can easily add tooltips to your Webflow sites.

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

A fun text effect where text hops on hover.