The Top 270 Animation Webflow cloneables

Here's a fun glitch style effect for your Webflow site. With this CSS effect the entire page, text and everything will appear to glitch randomly. It's a fun way of adding dynamic effects to your site.

Easily add a preloader page animation to your Webflow projects. This loading animation allows you to easily edit and add a unique preloading transition to your Webflow site.

Perfect for a services or overview page on a Webflow site. This progress bar indicates where you've scrolled through and which content you're currently viewing. The progress bar was created to scroll to the dynamic CMS collection blocks, typically this is not possible with Webflow since collections can't have anchor links. This was resolved via a nice hack by assigning the ID to the collection classes through an embed and then converting the progress bar links to anchor links so that you can scroll through the various content naturally.

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

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

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

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.

Using Webflow's 3D transform, custom animations and a bit of JS you're now able to recreate the Star Wars intro on your Webflow site. Please note that there's custom code required for this to work which you can find within the closing body tag of the Page Settings. There are two scripts, one that powers the music and the other that powers the moving stars.

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.

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.

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.

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.

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.

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.

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

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

Here's a way to add an infinite, transparent slider to your Webflow site. An easy cloneable that you can copy and paste to your site and have it setup and running in no time.

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.

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.

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.

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.

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.

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 scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

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

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 technique to add growing divs or sections on mouse hover in Webflow.

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 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 fun text effect where text hops on hover.

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

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.

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.

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.

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

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

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.

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 unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

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.

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.

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

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

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:

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 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 hover slider style interaction animation to your site for revealing an image, or div content.

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

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

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.

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

A clear and easy way to add Chart.js to your Webflow site. Here's how to add it to your Webflow site. Step 1: Add a div, and add a HTML Embed in the div. Step 2: Apply the chart id - eg <canvas id="myChart"</canvas> Step 3) Inside the HTML embed (below the canvas tag), add in the chart.js CDN Step 4) Apply the script content in the hTML embed, this is the chart.js script info.

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.

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 custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom 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 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 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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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

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.

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

Another amazing Webflow full screen menu featuring a hover over image preview interaction that allows for dynamic images to be presented. This Webflow interaction creates a fun, yet professional animation to your Webflow's menu.

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.

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.

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.

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.

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.

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

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 thorough guide and technique for freezing scroll on the page on a modal popup. Closing the modal via the background click or by clicking on the close icon closes the modal and makes the page scrollable again. This is a thorough tutorial that helps understand the process, and how to implement the technique on your site.

Here's a technique to add an infinite spinning record image to your Webflow site. Perfect for a music site, DJ, or media style site. This method could also be used for a variety of other interpretations.