The Top 270 Animation Webflow cloneables

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

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

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.

Here's a unique team, about card hover animation for Webflow. When someone hovers over the profile image the image zooms out, and the name, details and a button is then displayed.

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.

A smokey button design with interactions and hover state animations.

A demonstration of using Sketch.js for a background interaction within Webflow. Using sketch.js the background of your Webflow site becomes a drawing canvas in which users can move their mouse and it creates a design on the background of the 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.

A very cool and unique background effect of a geometric spinner in Webflow. Perfect for adding depth and character to a Webflow sites background.

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.

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

A demonstration of how to utilize lotties within Webflow CMS. This cloneable example will help demonstrate how you can embed, utilize and even control lotties via Webflow CMS system.

A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.

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.

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.

Here's a way to add some animation to your text elements within Webflow. The outer line of the text is animated and creates a fun effect for your text.

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.

Here's a way to add a rounded menu/navigation transition to your Webflow site. When a user clicks the menu the menu loads from the top right to bottom left in a rounded transition.

Here's a virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

Here's a rebuild of MoMA's website navigation and menu bar. A great way to add a well designed and thought out navigation and menu bar to your Webflow site.

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.

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.

Here's a fun card interaction in which the cursor acts like a peeling of a label on a Webflow card. Perfect interactions to add a new layer of dynamic flair to your otherwise boring Webflow cards.

A full screen parallax menu/navigation featuring mouse interactions.

Here's a way to build a toggle switch for your Webflow site using interactions. A great way to learn how to build toggle switches in Webflow and get a better understanding of Webflow interactions.

A unique swatchbook hover interaction created in Webflow. When a user hovers over a swatch card, it sweeps out to display the card information. The entire animation and hover effect is built via Webflow's native interactions and doesn't require any custom code.

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.

Cards with a full page transition effect upon click. Upon clicking the transition effect and full screen modal is loaded. Each card has individual colors. Be sure to watch out for the combo classes upon duplication and adding new interactions for each card.

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 simple review slider with a lottie star load animation. When each new review slide is loaded the lottie stars load one at a time. This is also mobile responsive and should work at all resolutions.

Here's a demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

Do you want to have draggable divs or content in Webflow? With this technique you can unlock the power of moving around divs on your Webflow site.

Here's a way to add a rotating outline for buttons in Webflow. A unique and eye catching animation that draws your users attention to important buttons on your Webflow site.

Nine different video play button animations ready to be cloned to your Webflow site. This allows you to add dimensions and CTA's to your videos on your Webflow site.

A beautifully designed opt-in/sign up modal interaction with Webflow that provides a unique way to sign people up or opt them in via an interaction. The modal has a custom bounce interaction on load and you can use the X or click anywhere on the page to close the box.

A full screen menu for Webflow with hover over interactions. This menu features all the native Webflow interactions required for building a full screen menu. When a user clicks on the hamburger button the Webflow menu slides in from the top. Each menu item includes a hover over interaction in which the cards expand and the colors turn from black to white background and the fonts also change at the same time. Closing the menu slides it back to the top of the page.

Show/hide image on text link hover.

A fun, cartoon styled 3D animated button that bounces on hover/click. A fun effect for your Webflow site and a way to liven up a typical button.

A very unique, fold in curtain style menu animation navbar for Webflow. The menu is revealed from both the top right and top left of the page. You could add different images or colors for the panels coming in. You could also add a variation of different textures or styles to those divs, or keep it simple and use this example. The animated menu was built using Webflow interactions. The rotating text inside of the menu was created with Illustrator, After Effects and Lottie.

Here's a fun example of creating an animated image on scroll effect/interaction in Webflow.

A fun demonstration of animated icons with hover states in Webflow. They're very simple line icons with subtle, yet unique, hover interactions. One thing to note with the shapes that change size is that the size animation rather than scale, as adjusting scales adjusts the widths ever so slightly and doesn't make the animation look precise. Size and move were the only two animations used for these shapes. The only easing was used was ease and all the animations have a duration of .5 seconds.

Advanced pricing table that provides a loading bar indicator for individual features. Includes hover interactions, animated bars, sticky header and much more. This also is mobile ready although be careful about hidden columns.

A simple and easy to implement page loader using all of the letters of the alphabet in Webflow. Everything is accomplished with Webflow interactions and zero custom code.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

A simple way to add social media links with a hover animation to your Webflow site.

Unlock the power of jQuery with this scrolling 3D cube. A fun way of showcasing images, portfolio items and more.

A simple and clean app download call to action in Webflow with animations and interactions.

Blend modes meets an infinite neon animation via Webflow. The blur filter and mix blend modes were used to create the neon effect with a background gradient creating the color change across the screen. The blend mode was created via CSS as this was created prior to Webflow's native support so you'll need to add the CSS to get this to work properly. The infinite movement effect was created with Webflow's native interactions which shows the dynamic power of Webflow interactions. The infinite symbol was created using 3D transforms and the blob follows around the path.

A free cloneable hero section with blue and white fonts. Includes buttons, social media links and a pre-made menu.

Reveal an image on initial hover, on second hover remove the image from the card. Difficult to achieve as you need to sequence the triggers and hide elements to control the interaction.

A fun glitching animation effect in Webflow and a mouse hover masking interaction with a custom cursor icon.

Here's a way to create a load more option for content on a Webflow site. There are different techniques to showing more information and one of the best ways is via a load more button to display content dynamically. This method provides a light jQuery option with a focus (scroll to) the newly displayed content and a fade-out effect when all of the content has been displayed.

A simple pricing table with a three column design for Webflow. This simple pricing table features a blue design with gradients, animated circles background, and a primary pricing package with features options.

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

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

Here's a way to achieve a looping dotted line in Webflow. Easily add this to features sections, connecting two divs or items together and much more.

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.

Rather then a boring toggle switch why not add a bouncing toggle switch to your Webflow site. This is an easy to implement bouncing toggle switch created with an easing animation.

Here's a way to add a unique image hover interaction to your Webflow projects. When a user hovers over an image various hover over effects take place. This demonstration shows several different methods. You can use this animation variants found on this page. To add this effect to your project copy the image wrapper (.wrapper) and change the transform-origin of the images as you'd like.

Here's a unique test/experiment to create an advanced LED display hover effect in Webflow. This is a great demonstration of what you can build with Webflow interactions and may lead to some. inspiration for future Webflow project builds.

An example of a form label input animation for your Webflow site. When you click on the input the label waves above the input via each individual input when it's clicked on.

This method showcases a 11x11 grid menu animation on click. The blocks in the grid appear in a specific, staggered to create this menu effect. The staggered effect plays in the opposite direction on the menu close. There are also micro interactions applied within the menu appeared.

Want a full page slider effect in Webflow? With this technique you will be able to create a full page slider. This is an illusion using the page loading interactions, making the page look like it slides to the next page.

A fun way of adding detailed information for your CMS items via a jQuery powered sidebar. The project uses a single CMS collection list to populate both the grid and the information when clicking on the card.

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

A free Webflow login in/sign up page design with unique loading interactions, custom inputs and much more. A perfect cloneable to easily create a login or sign up form for your Webflow site with fun style 3D illustrations and loading animations.

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