Discover Webflow cloneables

A product card with hover animations for Webflow. When a user hovers over the card the title of the product appears, and a few icons appear as well as the price staggered from the bottom. There is a cart icon that can be used to add the product to the cart, an eye icon which can link to the product page, and a heart icon that can link to a counter of some type.

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.

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 unique photo/masonry grid for Webflow featuring reverse scrolling interaction and mouse hover over effects. As the user scrolls down the page two sets of images scroll in one direction while the middle row moves in the opposite direction. This effect was created strictly from Webflow's native interactions and doesn't require any extra JS or CSS.

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.

Automatically show the correct tab based on the current day of the week on your Webflow site. This uses some custom code, although shouldn't need to be modified at all when you clone this. A video walkthrough is also included!

A way to achieve text appearing on scroll effect.

Here's a fun way of adding a custom worm style cursor to Webflow. The snake follows your cursor on the page and creates a trail effect. To customize the worm be sure to update the custom code.

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.

A testimonial slider animation for your Webflow site. Be sure to clone this so that the transition interactions are created for you without the hassle of recreating them.

A free Webflow style guide featuring all of the fundamentals that you'd need to build a Webflow site. This includes backgrounds, buttons, cards, colors, elements, fonts, grids, icons, sections and much more. This styleguide was created to be a starting foundation of your Webflow site, ensuring that each element has it's own style guide element to keep consistency and brand continuity throughout your Webflow project.

Learnflow is a free template to learn how to no-code in Webflow. You'll learn how to.. 1. Add a comment section with Remarkbox 2. Integrate a chat box with Crisp (our sponsor) 3. Translate your site instantly with Weglot (our sponsor) 4. Integrate a video chat with Daily.co 5. Sell digital assets easily with Gumroad 6. Track events and conversion rate with Splitbee 7. Add 3D scenes and elements with Spline 8. Add a radio with RadioKing 9. Create a community space with Memberstack and +10 other exercises to integrate powerful features to your website. For more informations, visit https://www.supercreative.design/download/learnflow Clone the project to get started.

How far can you push Webflow's native interactions? In this demonstration you'll find a Mad Max movie intro page that showcases just how far you can push the limits of Webflow interactions. There are no gifs, gimmicks, or lottie/SVG animated files being used here.

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.

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

A fun way of adding a water mouse hover ripple effect to your Webflow site. Simply add a tiny code and the javascript library and you're all set.

Here's a way to create auto rotating tabs in Webflow based on a timed interval. This helps animate the static tabs and create a auto-rotating tab functionality, which are set for 5 seconds in this demonstration. This allows you to use the native Webflow tab functionality and users can still click between tabs. Interactions also still work. The animation and auto changing stops when a user hovers over any tab. This technique uses some custom code found in the embeds as well as Webflow native interactions.

Add a fully responsive preview of your Airtable database in Webflow

Looking for a dynamic and easy way to build email signatures in Webflow? Here's a CMS clonable that allows you to easily manage and create email signatures within Webflow. This is a step-by-step guide to create and manage you or your companies email signatures and designs from within Webflow. Building an email signature can take seconds now thanks to the power of Webflow's CMS and your own unique designs.

Add Trustpilot reviews to your Webflow site with this premade Trustpilot review slider. This slider was built using Finsweet's client first and uses only SVG images for the icons. A great way to add testimonials and reviews to your Webflow site.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

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

Here's a technique to add a rotating images on page scroll via Webflow interactions. This adds a dynamic feeling to your site as your users scroll down on your Webflow site the images rotate around the page.

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.

A geometric pattern design with hover animations created in Webflow. This technique and demonstration was created completely with Webflow's native designer and requires no additional codes or scripts to work properly. Using a bit of creativity and patience a few skew tranforms can build a seamlessly endless geometric pattern. Add in some border animations and you've got a fun, fully interactive geometric pattern in Webflow.

Here's a way of adding a simple file upload to your Webflow site via Uploadcare. This is perfect for clients, users, or sign up flows that require the use of file uploads.

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.

Here's a unique, recipe card animation created in Webflow. This is perfect for showcasing recipes on your Webflow site in a unique and interactive way. When hovering over the card the image becomes full height, and the card moves forward on the z-axis. The card was placed in a wrapper with a perspective applied to it to bring the card forward. Also a timer icon shows up on the top right corner to display the time it takes to create each recipe.

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

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.

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

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.

A simple way to create complex CMS grid layouts. You can define a layout for any item in the grid. You can make it multiple spans of columns and rows. You can also set columns and rows to the nth items as well as even or odd items.

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

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

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

Add custom radio button designs to your Webflow site with this cloneable. These customized radio buttons require no custom code and use Webflow's native interactions to accomplish a unique, radio icon free design.

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.

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.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

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.

Three different stunning Swiper.js carousel sliders built for Webflow. The first variation contains a draggable bar, slider dots to indicate which slide is currently active and slider arrows. The second variation features a dark themed variation of the first version. The third is a larger variation of the other two. These designs are all setup for Webflow's native CMS collection so that they can tie into your preexisting CMS items. As mentioned you will need to add the custom script found in the page settings. With this Swiper.js slider you can customize the looping behavior, slides per view, the slides between groups, space between, mousewheel, the transition speed, mobile responsive break points and its actions. You'll notice that classes are associated with many variables in the code, so be sure to use those or update them to your own.

Here's a great way to add a dynamic, image changing section based on scroll in Webflow. The left section is absolute image that changes as you scroll down the page further.

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.

A fun GSAP text hover image span effect created for Webflow. When hovering over a specific text or link, images appear on the screen. Perfect for dynamic and playful interactions powered by GSAP. This script is powered by GSAP and you can find the custom code found in the page settings. This allows you to signify images that appear when a user hovers over a native Webflow text span item. This is also mobile friendly as the code allows you to set media resolution settings and customizing the effect on the non-selected text span. You are able to customize the easing, zindex position, colors and much more.

Range slider examples created for Webflow. These range sliders allow you to capture price ranges for your form inputs and specific amounts as well. These demonstrations can be easily edited to suit any amounts or styles based on your own specifications. The sliders are built using custom code found within the page settings so be sure to add the code to your site in order to work properly.

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.