Here's a unique way of adding a liquid menu navigation to your Webflow site. This creates a page load interaction that makes the menu click/page visit seem like a liquid menu/navigation. A unique interaction that adds a sense of dynamic flair to your Webflow site.

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.

A unique interaction in which images fly into page on link hover and then fly back out on hover out in Webflow. A fun and unique way to add dynamic elements to your Webflow site via hover overs and GSAP. Please be sure to add the custom code within the body section as well as the global styles symbol to ensure that this effect works properly.

A unique interaction in which a circle follows the page scroll in Webflow. As you scroll between sections a circle follows each section and interacts with the next page section. To use this properly make sure that you add the global styles html embed, as well as the custom script code found in the /body section of the page settings. This uses GSAP as well as Scrolltrigger.js.

A drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

A unique page scrolling effect for Webflow powered by GSAP and Webflow CMS. When scrolling down the page cards appear to move out of a stack and fly off the page between each "section". The backgrounds colors change while the title of each section is displayed. This is created via custom code from GSAP and ScrollTrigger so you'll need to add the custom code found before the closing body tags in order for this to work. The Webflow CMS controls each section and is tied directly to the GSAP code, including the images for the cards, the sorting order and the background color associated with each section.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

Here's a technique of toggling a class based on scroll in Webflow via GSAP. Using this technique you can trigger any class that you'd like, in this example images, as a user scrolls down the page. This technique is using CMS to drive the images and as the user scrolls down the page the class is triggered via GSAP and Scrolltrigger.js. Be sure to add the custom code found within the Page Settings (body and head) in order for this to work properly on your site.

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

A way to add dynamic variable fonts interactions via Webflow. On mouse hover the fonts change to another font class and offer a transition between the two font classes via the hover effect.

Another stunning snapping slider design for your Webflow site. As users scroll down the page each section elegantly snaps to the next slide effortlessly. Beautiful transitions change both the primary image, and background image of the relevant sections. The slides information is all driven by Webflow's native CMS system powered by GSAP, and Swiper.js. In order for this to work you'll need to add the relevant code found in the page settings, both body and head.

A unique Valentines Day card creation tool via Webflow. This shows ways of creating a form with a static URL creation and a way to develop dynamic card content.

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

Add custom CMS slider with stacking and overlapping cards.

Here's a unique way of reducing/resizing and repositioning an image on scroll in Webflow. Be sure to add the custom global styles embed, custom head code and body code found in page settings for this effect to work.

A full page CMS scrolling interaction that's perfect for portfolios and product driven websites in Webflow. Built with GSAP this scroll interaction creates smooth scrolling interactions between sections on your Webflow site. Be sure to add the custom global styles embed symbol as well as the custom scripts in the head and body section.

An infinite diagonal parallax slider for Webflow that's draggable or can be changed via arrow keys.

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 styleguide for Timothy Ricks Wizardry technique in Webflow. This styleguide will add the core elements of the Wizardry technique to your Webflow site.

Here's a way of adding a full page infinite scrollable and draggable grid in Webflow. This grid is fully draggable in ALL directions, horizontal and vertical as well as in any other direction. A perfect way of adding a unique design for portfolios, photography and much more in Webflow. This can also be used to tie into Webflow's native CMS system.

Want to validate forms prior to submission in Webflow? Using this technique you'll now be able to validate form fields in Webflow prior to allow a submit using native Webflow forms. In order for this to work you'll need to add the custom code found on the Page Settings. This utilizes jqueryvalidate to validate the forms prior to submission. Jqueryvalidate offers a number of additional validation features that may relevant to your needs.

This is a demonstration of Webflow's new blending and backdrop effect filters in action. This cloneable features both blending and backdrop effects in a fun art quiz. The artwork that's being questioned is covered by the Screen blending effect with a Blur backdrop filter over it. When a user selects an answer the blending and backdrop filter is removed to showcase the artists artwork.

A great way of creating repeating patterns for your CMS grid items using CSS nth child. It's also responsive!

A simple to do list app built in Webflow. The todo list app saves the list status to your browsers local storage. Be sure to add the global styles symbols, the custom head tag as well as the custom JS code added to the body sections.

A recreation of the Shadow and Bone map. It's fully draggable with info areas for more information.

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.

A CMS driven range slider that updates the price based on the selected range in Webflow. This pricing range slider is connected to Webflow's native CMS system. Note that this requires custom code within the Body close tag section to work properly.

A method to highlight text on page scroll in Webflow. A unique a fun interaction in which the text on the page begins to highlight as you scroll down the page. Each letter even partially highlights depending on where you've scrolled on the page. This effect uses GSAP and Scrolltrigger.js to create the effect. You'll need to add the custom code found on page settings for this to work properly.

Looking to create a Quiz in Webflow driven by your CMS? Here's a technique for creating that. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

Looking to build a quick in Webflow? Here's a guide and tutorial of how to build a Quiz in Webflow. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

A unique scrolling image sequence in Webflow created by GSAP and Scrolltrigger. Be sure to add the custom styles embed, head script, and body scripts for this to work properly.

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 Webflow CMS driven image lightbox/photograllery. This lightbox is created using custom code via jQuery and the script can be found in the closing body tags. This method allows for you to use CMS collections on a single page and power lightboxes of photogalleries with a simple bit of code. The lightbox features a pop up modal, previous and next buttons and a way to close the modal screen.

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 scroll into portfolio transition effect for Webflow. Be sure to use the HTML embed code found within the global styles symbol. The majority of this transition effect is accomplished via Webflow's native interactions.

A technique to create an infinite image scroll in Webflow. This method uses Webflow's native CMS as the image library for the infinite scrolling image effect. Utilizing the power of GSAP and Scrolltrigger the images come to life and begin scrolling continuously. Please note that you'll need to add the custom code found within Page Settings in order for this method to work. If you scroll in either direction the image slider will begin sliding in that direction continuously at the rate you scrolled.

Based on kdcap.com this mouse/hover effect provides a mask showing the original image style/color. A unique mouse hover interaction. The image masking technique is created from some JS so be sure to copy the script in order to get this effect to work. Essentially an image mask circle is created and the script has the image masking circle follow the mouse around the website.

Create a looping infinite CMS Marquee with pause on hover effect. Achieved via custom CSS.

A scroll into view CMS driven portfolio or features interaction. Also has hover over effect.

A rebuild of the Wickret hero using blending, animations, mouse interactions and much more for Webflow. This cloneable features a clean and modern hero section with a number of unique effects including a custom mouse masking effect and cursor. As you scroll down the page the product demonstration has a card that pops out and in based on the page scroll percent. There's custom JS library inview utilized for the hero scroll effect and the nav button hover in effect. The mouse shape effects are all created with Webflow's native interactions to create a dynamic effect.

Learn how to implement GSAP ScrollTrigger in Webflow. This tutorial and example cloneable showcases several different Scrolltrigger GSAP effects to turn your Webflow site into a dynamic powerhouse. When loading the page you are presented with a primary image and brand name. As you scroll down the brand moves from the bottom of the page to the top menu while reducing size. Further down the hero section appears and one of the words begins to move behind other text. Further down an image appears and then grows as you scroll further down the page. This shifts into the product section in which images appear with a parralax effect over certain words. This shifts into another product section and the backgrounds transition while the images still float above the text. Each section has a different background color/text color with the images continually scrolling above the text. This utilizes a lot of custom code, and utilizes Webflow's native CMS for products and items found on this page with CSS nth-child. You will need to add the custom code found in Page Settings to get this to work properly. Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50 Conceptual design for https://www.minimalgoods.co/

Showcasing Webflow's new blending and backdrop features. This demonstration cloneable shows off how text hover effects behind Backdrop blur and blend effects in Webflow. In this example text behind backdrop blur shapes showcase the effects colored linear gradients and shapes with no color gradients and the effects of text behind with hover effects. This technique uses a bit of CSS to create the text outline and hover effects.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

Here's a way to utilize a URL query parameter to trigger different styles, titles and more in Webflow. In this example adding a custom URL query parameter and some custom script you can link to a FAQ page that then updates the page title, color and the topic based on the query parameter you select. This allows for pages to be "dynamic" and linking to pages with unique attributes even though the content of that page is the same.

An experimental SVG hold and draw technique in Webflow. Unfortunately this isn't supported in most browsers yet although is a fun example of creating a grid system with Webflow divs and using GSAP to create an interactive canvas on your Webflow site. The divs are all created natively with Webflow's designer while the power comes from GSAP. You will need to add the custom code found in Page settings in order for this to work properly.

A fun way of showing off a product by allowing for feature zoom in on click. Great for ecommerce sites that need to provide context into features with an interactive zoom in capability.

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 beautifully designed team page with image transitions on click in Webflow. Built with GSAP this creates a team page section, and relevant content on click transitions not found via native Webflow interactions. Please note that in order for this to work properly you'll need to copy the HTML embed within the Global Styles symbol as well as the custom head code and body code found within the page settings section.