The Top 263 Animation Webflow cloneables

Turn your site into an interactive black hole with this unique Webflow cloneable. Please note that this entire example relies on scripts and code so you'll need to add the code found on the page and within the page settings for this to work properly.

Two examples of animated Macbook and Apple animated mockups that are perfect for your Webflow site. Two variations of the Macbook coming into view and then opening as the user scrolls down the page. This uses a combination of Webflow interactions and Lottie files, with videos as the backgrounds for the mockup computers. These animated Mac mockups are perfect for portfolios, demo videos, demo GIFs and much more. A great example of how a simple Webflow interaction combined with Lottie files allows for a truly unique and dynamic animation in Webflow.

An amazing background color changing on timer for Webflow. The background color changes automatically based on a timed interval of your choosing. The animation uses a small snippet of JS within each page. In order to change the colors you will have to change the hex code in the array.

A unique 3D looping card animation built with zero code on Webflow. This is perfect for a unique way to display features, services, images and more on a site. This infinite looping card animation continues endlessly and provides a fun and unique interaction animation that adds a dynamic flair to your Webflow site.

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

Here's a way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

Here's a way of adding an animated progress bar to your Webflow site. All you need to do is update the width % to your preferred number. The animated progress bars add a fun Webflow interaction animation to the metrics section of 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.

An expiremental hamburger menu for Webflow with the interactions. This is a full screen, animated hamburger menu/navigation that you can easily add to your Webflow site.

A fun interaction in which a head with eyes follows the movement of a mouse on the page. This fun interaction showcases the abilities of Webflow interactions as the entire effect was created using Webflow's native interactions. As the user moves the mouse over the site the head, and eyes change location, the mouth grows and shrinks and the eyes also have another blinking interaction. The entire head was built using divs, as well as each individual element such as the ears, eyes, mouth and everything else. All three interactions rely on the page load trigger and then utilize the mouse moving in viewport functionality. Quite honestly this is one of my favorite native Webflow interaction animations that's interactive and playful.

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.

Here's a way to create a color changing background effect in Webflow. Using preselected colors you can have the background color of your Webflow site shift over time between your preselected colors.

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.

Here's a wonderfully designed mega menu navigation with dropdowns for Webflow. This mega menu is perfect to get your navigation built quickly for your Webflow site. Featuring multiple different dropdown styles, perfect for any Webflow project.

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.

A unique animation for a menu/navigation in Webflow. When a user opens the menu it opens with an expanding circle animation to add a unique design flair to your Webflow navigation/menu.

Here's a method of adding a toggle switch without any native Webflow interactions. Step one is to place a checkbox in your form (use custom checkbox option. Step 2 style your checkbox like a toggle box. Step 3 place the dot as a svg image. Step 4 style the checked state: move the dot to the right / change the background color. Step 5 on normal state add transition to background-position and background color property. Done.

Easily add dynamic and interactive FAQ sections with accordions and slide in interactions to your Webflow site. There are 5 different designs that include scroll into view interactions as well as expanding/closing accordions, tabs and more.

A nice background animation with a very small fie size. Download the JS files, download the .txt fill file Search for backgroundColor Change the hsla code Upload the new file Link the new script in the script tag

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.

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.

A fun cube particles animation for your Webflow site. The code was tweaked to make it fully responsive and configurable within your Webflow project using attributes. You can edit particle color (HSL format), scale factor for desktop and mobile, particle density, cube perspective, particle spread and particle velocity all within the attributes. Be sure to add the HTML embed to ensure that this works properly.

A fully cloneable mega menu navigation with full page dropdown interactions for Webflow. A great way to quickly get your Webflow menu/navigation launched with pre-built dropdowns, CTA buttons, and more. This was built with clear class names, native Webflow interactions, basic dropdown triggers and fully responsive.

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.

Here's a way to add a dynamic counter metric section to your Webflow site. This is accomplished via the simple JS available within the custom code section of the page settings.

A 100% native CMS based Webflow horizontal scroll technique. This CMS horizontal scroll animation was built solely with Webflow native interactions without any custom code. The method was to use a second collection list and make the length of the scroll trigger wrapper always proportional to the width of the horizontal strip. This way nothing to adjust or change in the designer when the number of items changes, and the animation will always feel consistent and smooth.

A unique scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

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 way of adding dynamic and animated portfolio items to your portfolio page. These bubbles automatically float up and include mouse interactions to access different pages.

A full page, dark themed, hamburger menu navigation for Webflow. Built with interactions and animations for sliding the menu in as well as hover states for the links.

A stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

Here's a way to add a glitch on hover effect to divs/cards that have images inside of it within Webflow. A fun way of adding a dynamic glitching effect to your Webflow site.

Here's a technique to add growing divs or sections on mouse hover in Webflow.

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to your Webflow site.

An interactive blob and SVG morph technique using anime.js in Webflow. This is a great example of utilizing Anime.js and a blotter text effect for your Webflow site. When a user moves the mouse/cursor on the page different interactive effects take place to make the site entirely dynamic.

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 fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

Here's a way to add a unique dancing light effect for the background of your Webflow site. This uses CSS for the animations which is responsive and will animate vertically on smaller screens.

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.

Learn how to add a particle bounce animation to your Webflow site. This effect uses a simple copy and paste code within the custom code section. You can even customize the code to add variety to this animation.

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.

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.

Before and after slider animation with pure animation Webflow interactions. You only need to replace the background image for .before-image and .after-image

Here are quite a few, well designed UI layouts for video cards and elements for video sections. You'll find hero sections, grids for video blogs, play button animations, and pop-up modals for videos for your Webflow site.

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

A fun way of adding dynamic radio inputs animation to your Webflow site. When you click on the radio inputs they expand when selected. Simply clone the project and add this dynamic interaction to your Webflow project.

Here's a way to add a horizontal scrolling section to your Webflow site. It's perfect for timelines, features and other similar sections of your site. This technique also has a scroll into view animation for each point.

A fun text effect where text hops on hover.

Here's an inverted text masking marquee interaction for your Webflow site. The text changes color depending on the background. This is a simple HTML embed so you can easily move it around your Webflow site. You can change both the color of the text and the background. This is currently set to Body so you can change the class ID.

A fully responsive 3D flippable/foldable card effect on hover. You can also achieve this via the scroll method as there are two options in this demonstration. These affects were created using Webflow's native interaction and require no additional code. The interaction uses hover event and rotate and move actions.

A fun interactive JS canvas effect that makes the background feel like colorful lava. Keep in mind that this effect uses only custom code which you'll find via the HTML embeds and the custom code section of the page.

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.

Here's a fully responsive, full page slider with diagonal transitions. Here's a great way to add dynamic slider animations and interactions to your Webflow site slider.

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.

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.

A unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

A fancy, full-screen responsive and mobile ready menu navigation. The custom open and close animation is with an animated background gradient that adds some uniqueness to the menu itself. View the youtube tutorial here:

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

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's a unique way to add a timed automatic slider to your Webflow site. Typically native sliders stop autoplaying as soon as you interact with it, however this version allows it to continue to play even after interacting with the slider. The progress of the slider is tracked via a lottie animation. This is accomplished via native interactions and CSS only code.

A great way of adding draggable background maps to your Webflow site. This is an example of a topographic map of Switzerland although could be adapted to other maps. This is easy to embed to your Webflow site.

A great way to add mouse aware, location aware slider navigation interactions to a slider.

A full page hero slider section featuring full page image and text transitions in Webflow. A hero section built for photographers and videographers featuring a stylish 3-column slider with large, modern page loading, and a full screen hamburger menu.

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

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.

A set of 8 different SVG preloaders for Webflow. These SVG preloaders are created entirely using SVGs and can be added via HTML embeds to your Webflow projects. These are perfect for demonstrating a loading state such as a preloader, submit button or other similar action.

A unique effect using Scrollify.js and tabs that scroll/ease in content based on the tab selected in Webflow. Using this method you can create a tabbed section that can be accessed via click or by scrolling down the page. When you scroll down the page the selected section will become highlighted to signify which section you are currently viewing. This method utilizes Scrollify.js so you'll need to add the custom JS found within the closing body tag.

Add a hover slider style interaction animation to your site for revealing an image, or div content.

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

Here's a way to create a mouse tracking text effect in Webflow. When a user moves their mouse around the page the text is manipulated based on its location on the page.

Here's a way to add a neon sign text effect to your Webflow site. A perfect CSS effect that creates a neon sign style text effect in Webflow.

A fun scroll and rotate portfolio page interaction with outline text for Webflow. When the user moves his mouse on the page the text rotates and different portfolio items come into view. A great way to add dynamic interactions to a portfolio page on your site.

Add a dynamic indicator to let your users know how far down the page they've scrolled via this interaction on your Webflow site.

A fun, book and page flipping interaction in Webflow. Please note that while a majority of the page designs are created with Webflow interactions there is some custom code found in the page settings to get this to work properly.

Over 20+ different lottie files perfect for the humburger or menu button of your navigation bar on Webflow. These unique menu nav lottie file icons are perfect for movements and animations of a hamburger button within your Webflow site.

Here's a technique demonstrating spinning, 3D circle divs based on mouse movements via Webflow native interactions.

A fun way of creating a 3D animated menu in Webflow. Creating a 3D perspective effect when expanding the hamburger menu. This is a simple, yet effective way, to break out of the typical menu design.

A fancy scrolling interaction to showcase your work in Webflow. This cloneable uses Webflow's native CMS and the power of Webflow interactions to create a smooth scrolling interaction in which each slide is a different section. Upon scrolling the images move in smoothly and the headline and description appear. This is a rather extensive interaction as it deals with scroll actions and scale, opacity, move based on the location of the page.

An experiment using a scroll effect, Lottiefiles and Webflow interactions and the simplest building blocks. A full description of how the effect is achieved so that you can easily replicate it yourself. The entire effect is created via Scroll Actions interactions and the location of the windows page scroll. The lottie files are then triggered by the percentage of the page scrolled with a "static" 100vh window.

Freelance user experience consultant and web designer. Available for custom Webflow sites, as well as UX design, research and prototyping.

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

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

Here's a well designed checkbox with an interaction animation. A perfect way of adding a unique checkbox design to your Webflow sites with a fading animation.

Here's an example of a menu with a slide in interaction and that features a background video for the menu. A fun interaction that adds some depth and liveliness to your Webflow site.

An advanced jQuery card hover interaction for Webflow. When users hover over the cards they expand and grow and feature a unique mouse hover over interaction in which the icons shift while hovering in a specific card. The background colors change and the buttons transform into a different call to action button. This is a fully responsive interaction and requires a bit of custom code to implement. To get this to work copy the section-end-cta and copy the code found in the closing body tag on the homepage.

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.

Here's a way to showcase several different slides transitioning per click. This is achieved via micro interactions for the previous and next buttons. The interaction for the arrows was created in After Effects and custom code was utilized to trigger multiple slide changes at once.

This is a full screen lottie with scroll interaction. A unique way of using page scroll to animate a lottie file.

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.

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.

A fun way to have an animated, cursor following dog animation on Webflow. This is driven fully by div elements and a bit of CSS and JS to make the magic happen.

Four unique methods for creating 3D elements in Webflow natively without using any type of code. No custom code or lottie animations were used and all of this was accomplished naturally via Webflow interactions.

A unique slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

A fun demonstration of what's possible using Webflow interactions and animations. When a user scrolls down the page the numbers continue to count up or count down on scroll up. This utilizes a number of native Webflow interactions and animations including 3D transforms, some math and a round text effect with absolutely no code. Scroll to the bottom to view the full interaction and the last animation effect.

A very fun way of adding a backlight effect to Youtube video embeds on your site. This currently works in Chrome and Firefox and needs a bit more tweaking to fully work in Safari. This works via native interactions and some custom code. Easy to integrate and get working on your site.

A smokey button design with interactions and hover state animations.

Here's a way to create a zoom in on click technique in Webflow. If you need to magnify an image on your Webflow site this cloneable is perfect for you.

Fullscreen unique loading animation for your Webflow site.

Here's a demonstration of a frosted glassmorphism card with hover and mouse interactions. An easy way to add a glassmorphic effect to your Webflow site.

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.