Green Pricing Table

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

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 way of utilizing sticky cards that stack on scroll in Webflow. Using position sticky and a scrolling into view interaction allows for this effect without any custom code.

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 GSAP text hover image span effect created for Webflow. When hovering over a specific text or link, images appear on the screen. Perfect for dynamic and playful interactions powered by GSAP. This script is powered by GSAP and you can find the custom code found in the page settings. This allows you to signify images that appear when a user hovers over a native Webflow text span item. This is also mobile friendly as the code allows you to set media resolution settings and customizing the effect on the non-selected text span. You are able to customize the easing, zindex position, colors and much more.

A unique stacking cards on scroll interaction in Webflow. When you scroll down the page the cards on the right side stack on top of each other. A unique interaction perfect for a SaaS or technology site. The stacking cards effect was built entirely using Webflow interactions and does not require any additional code or scripts. The effect is created by using the While scrolling into view trigger, with the use of Scale and Filter. The filter applied reduces the overall brightness of the card and the scaling is used to send the item back smaller. Overall a well designed and thought out solution for a stacking card interaction.

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

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.

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

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.

A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.

A responsive safari mockup built for Webflow. A perfect way to showcase a product demonstration or image in a responsive Safari style window. This Apple Safari mockup window is a light version rather than a dark version.

A free dashboard collection for an ecommerce company.

A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.

Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.