Menu Hamburger Lottie Pack

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.

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.

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.

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.

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.

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.

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.

This is the official project starter cloneable for Client-First. It contains a style guide page with all the utility classes that come with the Client-First style system. What is Client-First? https://www.finsweet.com/client-first Full docs: https://www.finsweet.com/client-first/docs Made with 💪 by Finsweet

An advanced demonstration of using Finsweets Attributes CMS Filter using no-code for Webflow. The example includes a search input, sorting, checkboxes, range slider, sorting, drop down, radio buttons and more. A great way to understand the capabilities and advanced filtering options of Attributes CMS filtering.

Backdrop filters for Webflow that show three different background effects including inverting colors, saturating colors, hue rotation, and grayscale created by Finsweet. This cloneable was created to showcase Webflow's latest native backdrop filters.

Want to add more than 5 Webflow collection items per list or have more than 1 nested Webflow collection per page? With Finsweet's Attributes you are now able to do this! Create a CMS nest functionality without any limitations and add more than 1 nested Webflow per CMS page. In order for this to work you'll need to add the custom JS library found in Page Settings head section and refer to Finsweet's documentation.

A full suite of wonderfully designed and accessible components for Finsweets Attributes CMS Filter and Webflow forms. Includes radio button, checkbox, dropdown, search input, select, range slider and more!

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.