Lorelai is an elegant and stylish one-page template for your wedding, celebration, or any other can’t miss event. Use the built-in RSVP form to manage your guest list, and mix and match sections to customize your event!
An example of how to use Scrollify.js when you want partial height sections rather than full viewport height sections. View the full tutorial here: https://www.youtube.com/watch?v=E0jbNJ6M494&ab_channel=KevinHaag
Add a stacking slider as inspired by houseof.world. This adds a fun, 3D effect to your sliders that transitions and moves the cards forward, and to the back upon next slide.
Help your users understand what they should be searching for via this rotating search suggestions.
Create a seamless page transition for your pages in Webflow. Using just a small snippet of custom code you can allow the page time to complete an exit transition with an intro transition on the new page. Set your links to preload your pages for even faster performance.
A very cool scrolling spiral menu text effect. Opens up a fun opportunity for a unique full screen menu build.
A fun way of adding a little retro 3D grid animation with overlay scan-lines to your background/site.
A fun crystal ball hover styled button for Webflow. This was designed entirely with native Webflow interactions and does not use any type of custom code.
A simple login overlay panel for Webflow. A clean login UI overlay built with a minimal native Webflow interactions. Perfect for prompting a user to login upon taking an action, such as saving or bookmarking an item.
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 great way to add mouse aware, location aware slider navigation interactions to a slider.
Here's a way of creating a glowing, 3D hover card effect in Webflow. When a user hovers over the card the card creates a 3D effect with a gradient outline, another interaction is added to show a 3D rotating reflection. All of this was created with Webflow interactions and zero custom code.
Here's a unique way to add a timed automatic slider to your Webflow site. Typically native sliders stop autoplaying as soon as you interact with it, however this version allows it to continue to play even after interacting with the slider. The progress of the slider is tracked via a lottie animation. This is accomplished via native interactions and CSS only code.
A unique 3D scrolling interaction created for Webflow. As a user scrolls between sections each transition has various 3D effects with the image coming in one way and the text flying in another way. A majority of this was created with Webflow's native interactions while some minor CSS was utilized for the scrolling effects.
A fully native dark-mode toggle button to convert your Webflow site into dark mode or light mode at the switch of a button. This technique utilizes Webflow's native interactions and the Filter, BG color, text color and border color functionality.
A glass bar navigation design for Webflow. This micro interaction for a glass navigation bar design with hover over interactions is a great way to add social media sharing buttons to your Webflow site.
Add numbered paginations to your CMS collection lists via this small custom code snippet.
A very fun way of adding a backlight effect to Youtube video embeds on your site. This currently works in Chrome and Firefox and needs a bit more tweaking to fully work in Safari. This works via native interactions and some custom code. Easy to integrate and get working on your site.
An easy way to add expanding tabs with interactions via Webflow. This requires native interactions and zero custom code. A great way of adding additional text descriptions to tabs and save important space on your site.
Kevin Haag is a designer based in Los Angeles. He typically focuses on digital products, apps, and websites. He doesn't typically write in the third person. I ♥ Webflow!