Full Page Grid Portfolio

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.

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.

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

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.

Horizontal vertical marquees are easy to create in Webflow. However vertical infinite scroll marquees aren't as prevalent. Here's a way to create a vertical infinite scroll marquee in Webflow. This example even includes a masking hover over effect for each different scrolling marquee. Each marquee is built with native Webflow interactions and no custom code.

A unique product card animation on hover in Webflow. When a user hovers over a card the image shifts down, and a border appears with an animation, there's also a description of the card that appears as well. This animation effect was built entirely with Webflow's native interactions.

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.

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 fun interaction animation that adds confetti. Click on the waving hand for the demonstration.

An NFT collection with a minting dapp in Webflow. The minting works but you need to have a MetaMask wallet and you also need to have some MATIC tokens on the Polygon network to avoid high gas fees.

An analog clock built from CSS & JS in Webflow. The design is built from divs, while javascript and CSS drives the analogue movements of the clock hours and hands.

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.

A full page portfolio masonry grid with a mouse hover over effect.

A subtle, yet clean gradient moving background interaction created for Webflow. This cloneable was built with only Webflow native interactions and does not require any additional code or HTML embeds. The effect was created by adding 4 different circle gradients to a gradient wrapper. The moving gradients uses Webflow interactions page load trigger and manipulates the scale of each item over a timeframe. Essentially each item grows and contracts at different intervals creating the appearance of a moving gradient background that isn't overwhelming.

A number of different examples of utilizing Countup.js in your Webflow projects. The examples include, currency count up, intervals, scroll and more. The first example loads when the page is loaded, the second example counts up when the item enters viewport, the third item counts up several items at different intervals and finally there's a currency countup that continuously counts up. This requires custom code which you can find in the custom code section of page settings. Each example is commented within the code and allows you to update the target ID as well as the final count number. The second example is the scroll into view option and can be added as shown in the code. There's also a count down example, count up example with a duration and suffix. This is a great cloneable if you plan on adding count up or count down text items to your Webflow site.

Let's face it, Matter.js is fun! It adds dynamic elements to any site where you can play, throw, and drag items into each other with real like physics. This cloneable features how to utilize Matter.js with SVG bodies. While technically this is easy to accomplish this does require a bit of custom code and HTML embeds, with proper div names to work properly. You can find the custom code for Matter.js and this effect in the Webflow custom code page settings, also take note to the CSS HTML Embed located on the page. This technique uses Matter.js, pathseg.min.js and dcomp.min.js to work properly. This uses element IDs to target the matterContainer and can be further modified to your own specifications. A wonderful example of how to add Matter.js to your Webflow sites in a fairly straight forward manner.