Discover Webflow cloneables

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.

Add a hover over highlight animation to your accordions in Webflow. This adds another layer of dynamic effects to your accordions when hovering. No custom code needed and all done via interactions in Webflow.

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

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

Here's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.

Add an Apple style keynote feature grid to your Webflow site. Video tutorial found here: https://www.youtube.com/watch?v=fAkGkF-w1gI

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

A responsive safari mockup built for Webflow. A perfect way to showcase a product demonstration or image in a responsive Safari style window. This Apple Safari mockup window is a light version rather than a dark version.

A beautifully designed team page with image transitions on click in Webflow. Built with GSAP this creates a team page section, and relevant content on click transitions not found via native Webflow interactions. Please note that in order for this to work properly you'll need to copy the HTML embed within the Global Styles symbol as well as the custom head code and body code found within the page settings section.

A beautiful example of a Splide.js Webflow slider that features a variety of features in a beautiful design. This slider offers navigation buttons (previous/next), fading out of the person image that isn't active, text description fade in on current active item and more. This example utilizes Webflow's native CMS collections which helps make this even more expandable and future proofing for you or your clients. This example also features infinite looping so that no matter the number of slides users can navigate endlessly through the items. With Splide and this example, you can customize a variety of options such as perPage, perMove, focus, the gap between items, arrows, pagination, the speed that the slider changes items, the dragthreshold, rewind speed and individual breakpoint styling effects. Keep in mind there is some custom CSS that you'll need to add as well which can be found in page settings and via an embed.

Here are 9 easy to use minimal page transitions for your Webflow site. Add some dynamic flair to your sites page transitions via these premade Webflow cloneable transitions.

Here's a short CSS code for creating floating labels on a Webflow form. This interaction creates a unique way to add interactions and animations to what would typically be a static input field.

Here's a way of using CSS grid and a small amount of custom code to create a postage-stamp style layout for projects tied into Webflow CMS. A great way to add a custom grid design in Webflow hooked to Webflow's native CMS.