The Top 297 Animation Webflow cloneables

Several different text reveal on scroll animations for Webflow. These techniques use a paid GSAP plugin called SplitText was used to achieve this effect. You can find the plugin here: https://greensock.com/club/ There are three different animations demonstrated here, line animation in which each line is animated as the user scrolls into the viewport, word animation in which each word is animated on scroll, and letter animation in which each letter individually animates.

Add a liquid metal background animation to your Webflow site via WebGL. Please note that this example relies heavily on scripts and custom code so you'll need to add the custom code found within the page settings.

Here's a demonstration of a spinning 3D sphere in Webflow via Three.js and wEBGL

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

An infinite scrolling vertical image interaction for Webflow. A great way of achieving a vertical scrolling looping image on your Webflow site. This technique uses custom CSS and JS so be sure to check the custom code within the Page Settings.

Here's a full screen menu navigation with animations and interactions in Webflow. This is a great way to easily add a menu/navigation to your Webflow site. This was comprised of three components during the build process. First, an image wrapper with an image inside of it. Second, the blue background and third a right wrapper with the menu items inside of it. The image wrapper and right wrapper are both 50% width within the menu. The width of the blue background is 150% so it has a quicker animation as it scales in. By having separate wrappers inside of the menu wrapper the scaling effect can also apply to the image, and the blue background as well as individual animations to the menu items. The menu trigger also turns into a close icon on click and then back to the hamburger button.

A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.

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.

A fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

Three different variations of an infinite scrolling marquee driven by completely by Webflow CMS. All you need to do is choose the marquee, use Webflow CMS and you've got an infinite scroll marquee. Three different size variations available in this cloneable. The scrolling marquee is created via CSS, making this easier to implement then Webflow's native interactions, especially when incorporating Webflow's native CMS. You'll find this code within the HTML embed.

Add custom CMS slider with stacking and overlapping cards.

A unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.

An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.

Here's a way to add an animated number counter on load in Webflow. Now you can add a number counter that counts up on your Webflow sites. To accomplish this you'll need to add a class to the number you want to animate. Copy and paste the code in the Settings -> Before body tag. Change the name of the class that you created for the number. Finally, modify the parameters for it to work. The parameters that can be modified are start, end, duration, delay, true, repeat, decimals, currency and the separator. Please keep in mind that this will only show on the published site and not within Webflow editor.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

An easy way to implement a noise background animation for your Webflow site via CSS only. Make the background effect even more visible by adjusting the background color.

Add interactive 3D particles and a 3D spinning object to your Webflow site.

Background swirl animation via canvas backgrounds in Webflow. This method is created via a custom JS file found in the closing body tag of the page settings. This utilizes the unique javascript text "hack" allowing you to host JS files as text files in Webflow and calling that text file as a script.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

A two colored spiral galaxy animation for Webflow created with Three.js. This spiral galaxy spins in the background of your Webflow site and offers zoom in/zoom out functionality by the scroll wheel on your mouse.

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

Integrate GSAP scroll text effects to your Webflow site. Eight different text scroll effects powered by GSAP for your Webflow site. The effects include words sliding up, individual words rotating in, words sliding in from the right, individual letters sliding up, individual letters sliding down, and individual letters fading in. This effect utilizes GSAP, ScrollTrigger and split type in order to work properly, you'll also need to add and modify the pages custom JS code in order for it to work. The code can be modified to change the start offset of the effect, the opacity, the duration, the ease effect and much more. Unlock the power of GSAP for various text effects today in your Webflow projects.

An infinite scroll marquee on hover interaction for Webflow. When a user hovers over a link an infinite scroll marquee animation is displayed. This is perfect for a menu or navbar within Webflow in which you'd like to add extra emphasis and animation design to. This was built entirely from Webflow's native interactions and requires no custom code.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

Add a type writer typing text animation to your Webflow site. This cloneable features a type writer that's popular on many of the sites on the Web. This technique requires a combination of custom CSS and script via Typed.js in order to work correctly. The words within the typed.js are modified via the JS code and further customizations can be modified there as well.

Here's a unique parallax blur scrolling animation that's perfect for portfolio sections in Webflow. This parallax blur scrolling animation effect adds the image that's being scrolled to the background with a blur filter effect. All of this is achieved via native Webflow interactions.

Here's a way of adding a text reveal animation on scroll to Webflow powered by Anime.js and Luxy.js. As a user scrolls down the page the text animation is displayed showing one letter fading in at a time. As you scroll further down the page you'll notice the smooth scrolling effect created by Luxy.js. All of this is powered by the custom code found within the page settings of both the header and body section. Be sure to add these to your site in order for this method to work properly.

Here's a way of adding GSAP's motionpath technique using Scrolltrigger and Motionpath in Webflow. As a user scrolls down the page an animation follows a wavy path. Please note in order to get this to work you'll need to add the custom code found. in the closing body tag as well as the custom HTML embed found near the image file.

A stunning background animation that's interactive and provides a glassmorphism design via Three.js for Webflow. This interactive, twisting sphere can be dragged and rotated anywhere. Playing with the settings, especially phase, will produce colorful and unique results.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

A unique interaction in which images pop up an trail the mouse cursor when moved on the page. A fun technique that could be implemented a number of ways to create various dynamic effects to your Webflow site.

A simple way to add a mouse scroll animation with a dot moving from the top to bottom. This is not a lottie file or gif, this is made with interactions and divs.

A unique way of making your cards glow via a background animation in Webflow. This adds a moving gradient to both the background and the outline of cards in Webflow. Keep in mind that this uses a custom HTML embed for this effect to work properly.

Four different individual text animations created with Anime.js for Webflow. These animations each create an individual letter loading animation on load. Please note that this only works on the published site. To get this to work give a class to the text that you'd like to animate. For example, animation1. Add a span to the text and give it a class of letter. Copy the code on the settings, before body and make sure that you change the class to the one that you used in the first step.

Looking to create a rotating text effect for your headline and hero section? Here's an easy way to add this effect to your Webflow site. This also works in the preview/designer via a custom HTML code embed.

Four different examples of button hover effects in Webflow.

No javascript, no interactions, easy CSS scrolling marquees for your Webflow site. This is the easiest way to add marquees to your Webflow site without ANY confusing interactions or complicated JS solutions. Please note that you must have an even number of elements within your marquees for them to function properly and not skip around. The CSS for each marquee is included inside of the container and denoted with an emoji.

A unique interactive glassmorphism that follows the mouse cursor on the Webflow site. This dynamic glassmorphism Webflow technique is a great way to add 3d transform effects to your site.

A wacky and fun button animation in which emoji's explode after clicking a button in Webflow. This effect was created using custom JS so be sure to add the code found in the page settings to your site in order for it to work properly. While this could be created natively with Webflow interactions a simple JS library helps create this effect faster and easier.

Here's a way to add a parallax slider to your Webflow site. You can navigate the slider via dragging or using your arrow keys.

Here's a fun way of adding a unique fire style mouse following technique. Using three.js you can add this dynamic interactive animation to your site.

A CSS technique to create animated gradient text animations in Webflow. This allows you to add extra emphasis and design to your text headlines or any text on your Webflow site. Via a custom CSS found within the HTML embed you can create this animated gradient text effect.

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

A full set of beautifully designed interactions in Webflow for your projects. These interactions include buttons, play buttons, search, toggles, hamburger buttons, toggles, social sharing and much more.

A sun circle animation that grows based on the page scroll in Webflow. This entire animation is built natively with Webflow interactions and requires no custom code. A great example of how you can use Webflow's native interactions to build in depth, multi stage animations based on page scrolling.

A liquid 3D mesh net with gradients and transitions engulfs the background of your Webflow site. Inside there are shaders and code found in the page. You can adjust the values to customize the effects of this liquid 3D mesh design.

Add a shader gradient effect similar to Stripe's website to your Webflow site using this technique. This cloneable features a shader gradient effect found on Stripe's site. In order to get this to work properly you'll need to copy the HTML embed and paste it into the body of your project. You'll also need to copy the custom code found in the body and head section of the page settings. The colors of the gradients can also be changed within this code setting area.

A set of various language switcher elements designed for your Webflow site. If you use translation on your site these handy language switcher elements will come in handy. There are 14 different designs with necessary interactions to make them easy to copy and paste into your Webflow site. Nearly every kind of design you could think of to make this easy to implement.

Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.

Here's a unique way of adding count up odometers to your Webflow site via Hubspots odometer library. This cloneable includes several features, count up by 1 in a fixed interval, trigger odometer via GSAP Scrolltrigger, currency options, interval increase by own value, interval increment with a randomly generated number in a range, show numbers on a button click and a tutorial of how to make it work.

A fun interaction animation that adds confetti. Click on the waving hand for the demonstration.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

Here's a guide and an example of Particle.js on a Webflow site. Particle.js is a fun way of adding a dynamic background to your Webflow site. In this example a new particle is added every time you click on the background of the site.

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

A unique way of using a CMS to create an interactive responsive map. You can watch the full tutorial here: https://www.youtube.com/watch?v=VqSEvzzLoVQ

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

Add an infinite horizontal marquee to your Webflow site using only HTML & CSS. Building infinite marquees with Webflow interactions can be difficult and confusing. This solution allows you to easily add a horizontal marquee to your Webflow site using HTML embeds or Webflow's custom code. The infinite marquee is lightweight and allows you to customize the direction, as well as the speed at which the marquee is displayed on your site. Skip the confusing calculations typically required for native Webflow interactions and add an infinite Webflow horizontal marquee to your site in seconds.

Here are two different examples of logo animations in Webflow. Great inspiration for ways that you could animation your Webflow site logo with native interactions.

A demonstration of how to add an infinity cycle text header rotation with 3D style changes in Webflow. This technique uses native Webflow interactions and does not require any 3rd party scripts or plugins to work properly.

Using three.js and vanta.js to accomplish a 3D interactive polygon water background effect for Webflow. This interactive background allows for a ripple and water effect to be added to your Webflow site. When a user interacts with the page the water changes views and dimensions. You can edit the following variables based on your requirements. You can edit: shininess: 150.00, waveHeight: 26.00, waveSpeed: 0.70, zoom: 0.65, color: 0x368bbe

A unique headline animation for Webflow powered by Anime.js. The headline text sweeps in from the bottom one letter at a time and after displaying the line sweeps out one letter at a time with a fading effect. In order for this effect to occur you'll need to be sure to add the custom code in both the head and closing body tag in Page Settings. This is perfect for a preloader page or temporary scrolling section.

A full screen animated navigation with hover interactions and slide in animations.

An amazing 3D scroll animation that rotates a tablet towards the viewer on scrolling down. This can be used for both static images or animated videos and creates a wonderful depth perspective on page scroll by users.

Here's a rebuild of Stripes mega menu design in Webflow. Add a unique mega menu design and navbar to your site inspired by Stripe's mega menu.

Here's a way to utilize a tab change interaction for your Webflow sites. Upon clicking the tab the elements animate and the tab changes. Note that any interactions happening within the tab page much start after any interactions within the tab link are finished. Otherwise the tab component will cut off the animation resulting in nothing happening within the tab pane itself.

Liven up your hero section with this unique vertical hero scroll animation.

Here's a way to add scrolling section transitions on a Webflow site. You can easily change the colors of the sections to whatever you choose and implement this easily on your Webflow site.

An example of implementing Three.js via scroll interactions in Webflow. In order for this to work properly you'll need to add the custom code found in the page settings to your Webflow project. Please note that this is a rather advanced example and will require editing the code to make modifications for this to work properly on your site. This does do a good job of providing an example of how you can add dynamic, and interactive Three.js elements to your Webflow site.

Another fun text effect, this one shows you how to scramble text between transitions.

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.

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

Here's a demonstration of using three.js for the background of your Webflow site.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

A unique animated button with a grid effect on hover via Anime.js

Custom cursor particles effect for Webflow. When a user moves his mouse over the page custom particles are shown trailing the mouse. A fun, dynamic interaction that adds some animation and life to your Webflow site. This is accomplished via Sketch.js

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

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.

Simple moving gradient hero section using a lottiefile as a background. Added a blur effect to the background to make it appear more natural.

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 fun and unique way to add particles that follow your cursor in Webflow. Be sure to check the page settings for the custom code needed to run this properly.

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 are examples of multi-layered SVG shape overlays with generated animations for your Webflow site. There are several examples in this cloneable and provide good demonstration of how to use SVG shape overlays. Now you can easily modify the SVG colors in each pages custom code panel (header). Easily create a transition for your menu links. There are two demonstrations of ways to prevent multiple clicks and having the menu get out of sync via a Webflow interaction.

A fluid, morphing SVG background for your Webflow site using Anime.js. Perfect for the background of your Webflow sections, or entire site.

Text reveals is one of the most popular animations on the web today. This demonstrates how to achieve text reveals from different locations in Webflow. It's built using a custom script so be sure to check out the custom code section in Page Settings to ensure you have the proper scripts for the text reveal examples you want to achieve.

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.

Here's a technique to fade text in and out on page scroll with various sections and different texts in Webflow.

A unique way of creating an interactive scrolling timeline within Webflow. This demonstration provides a Covid timeline as an example for it's implementation. The animation is based on while scrolling into view with a scale of the line div blocks from 0 to 1. A

A fun way of adding a little retro 3D grid animation with overlay scan-lines to your background/site.

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.

Here's a way to achieve a folding and unfolding technique for divs or items within your Webflow site on page scroll.

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.

An interactive background animation for Webflow created with Spline. There's also a custom loading animation with a background image.

A custom slider that changes the size and focus of the slide after it changes to the next slide. Perfect for emphasis on the main slide while maintaining a transition effect for the other non-primary slides in Webflow.

A very cool three.js background animation featuring fly by hills that are black and white. A unique way to add 3D depth the background of your Webflow site.

Four different custom button designs for your Webflow site. These custom, animated buttons already have the necessary interactions to make them dynamic and interactive. A variety of hover states effects can be found in these 4 different button designs.

A fun way of adding a stair melting text transformation animation on hover in Webflow. Perfect for adding a dynamic layer of text to your Webflow site's header or headline section.

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.

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.

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.

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.