A fun 404 page for Webflow featuring a scrolling marquee and unique hover over interactions. This is a rebuild of the pluto.app/404 page. Featuring various scrolling marquees at different speeds with a gradient background and mouse hover link interaction.

Allow visitors to preview a site thumbanil on external link hover in Webflow. This feature allows you to get a preview of the site that you're linking to without having the user leave your site. It works by extracting the external links on page load, it then grabs a screenshot of those sites and reveals it on link hover. The card's position is calculated using custom code and thus works with inline links and link blocks. Just change the external link and preview will be updated automatically. Replace the demo screenshot API with your own in your live builds.

I wanted to see if I could rebuild this beautiful website. All interactions are created in Webflow :) Custom code used to create infinite scroll. Current limitations (stretch goals to fulfil at a later date): 1) Sound effects 2) Text changing effect Rebuild of https://one-is.com

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.

A magnetic call to action button featuring rotating text and a trailing custom cursor in Webflow. Circletype.js was used for the circular text rotating animation. You can change the text and the circle radius will automatically recalculate.

20 predesigned CSS link hover effects perfect to copy and paste on your next Webflow project. Each individual text link hover effect includes its own CSS for the hover effect. Simply add this to a custom HTML embed or to your sites custom code section. Effects include strikethrough, double underlines, scramble, moving in from both sides, growing and much more. A simple way to easily enhance your sites experience through simple, micro interactions.

A fun mouse drawing canvas perfect to add to your Webflow background or page elements. This utilizes sketch.js for the drawing canvas which allows you to use your cursor or by touching your mobile device to draw right on the screen. You will need the custom code found in the custom code page settings in order for this to work with your Webflow site. You then have the ability to customize the colors of the mouse trail on the canvas, and can update the design and color attributes. This is a fun and interactive element that can add a unique sense of interaction to your Webflow site.

A like button that allows the users to take notice when they give some love on your site. When a user clicks the like button the heart begins to fill up and the like count increases. The like count can be added to local storage or synced to a database.

Featuring 10 different text and typography scroll effects powered by GSAP, ScrollTrigger, Lenis.js, splitting.imin.js and Scrolltype.js. Keep in mind that these effects are great but you will need to have some understanding of code in order to modify these significantly as they rely on simply the JS libraries and data attributes to apply each effect. The first effect rotates the text and highlights each letter as the paragraph comes into view. This is achieved via the data attributes as mentioned previously. The second text effect showcases each letter coming into view from a different rotation and then all combines together to make the visible text. The third effect has each word come in at different positions from out of view and then into view on page scroll. The third version unwraps each word letter by letter as you scroll down the page. The fourth effect takes each letter and has it fold up at random intervals as you scroll into view. The fifth demonstration shows each letter rotating into place upon scrolling into view. The next demonstration creates a rolling hills effect for the letters as you scroll into view. The next one showcases a paragraph in which each letter is grown from the initial position as you scroll down the page. An appear example follows this one in which each letter of a word appears to be blurry and come into focus as you scroll down the page. The next and final variation has each word come in from random directions to create the paragraph.

Here is a way to create dual snapping cards on scroll in Webflow. When you scroll both cards snap into place, the slides change with an interesting reverse scrolling effect. Position sticky and Webflow interactions give the illusion of a snapping effect.

A 3D rotating cube that can be customized with images or videos, which can add a nice dynamic level for your features section. The effects are achieved via Webflows native interactions and transforms.

Here's a way to create auto rotating tabs in Webflow based on a timed interval. This helps animate the static tabs and create a auto-rotating tab functionality, which are set for 5 seconds in this demonstration. This allows you to use the native Webflow tab functionality and users can still click between tabs. Interactions also still work. The animation and auto changing stops when a user hovers over any tab. This technique uses some custom code found in the embeds as well as Webflow native interactions.

Here's a way to add a simple horizontal scrolling cards section to your Webflow site. The cards are designed for horizontal scrolling on desktop and tablets and vertical stacking on mobile. Since this was designed using Flexbox, you can add/remove cards and the scroll will still work. Although you'll likely want to resize the scroll track if you use a lot of cards. Each card can have a background video added to the card for a neat reveal on hover effect.

Here's a great way of adding an infinite sliding crypto price tracking marquee to your Webflow site. This displays live crypto data via the CoinGecko API, displaying both the pricing information and token logos from popular exchanges. You can add other crypto ticker tokens by adding them to the fetch URL of the code. The marquee also features a pause on hover effect.

Ever wanted to add an infinite text rotation/changer to your Webflow site? This infinite text rotation technique allows you to have a long list of words that rotate in from bottom to the top and then repeat endlessly. This includes an infinite loop version and a finite version that only runs once. This is fully responsive and easy to customize.

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

I loved how the Ribbon Finance website looked, so I couldn't stop but rebuild it in Webflow with a "party mode" on CTA hover...

A stunning background animation that's interactive and provides a glassmorphism design via Three.js for Webflow. This interactive, twisting sphere can be dragged and rotated anywhere. Playing with the settings, especially phase, will produce colorful and unique results.

A wacky and fun button animation in which emoji's explode after clicking a button in Webflow. This effect was created using custom JS so be sure to add the code found in the page settings to your site in order for it to work properly. While this could be created natively with Webflow interactions a simple JS library helps create this effect faster and easier.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

A unique effect in which the text begins a trailing effect as you scroll down the page. You can change the text inside of the symbol in the override settings or you can create a similar effect in the CMS pages or footers as well.

A unique gradient hero text animation in which the text of the hero section becomes a gradient a timed interval. This technique uses Webflow native interactions and a little bit of custom code.

A rebuild of the popular Wordle game in Webflow. This game also has a hidden Webflow mode, which when activated changes the dictionary to only include CSS, HTML and all things Webflow. The interactions, popups, word lists & attributes are all within Webflow. This rebuild is based on the same rules as Wordle, you have six tries to guess the 5 letter word. The exception being that each time you refresh the page you can keep playing as the word changes.

A full screen parallax scrolling interaction in which different sections are folded in on Webflow. This also has a subtle blurring effect to add extra design to the scroll interaction. This is built entirely from native Webflow interactions without any extra custom code or CSS.

Here's a unique hover effect for the portfolio cards in Webflow. When hovered, the card image expands and fades into a video. There's an infinite marquee that is then overlaid to provide a unique effect.

Here's a way to create a feature section that highlights the text and changes the image based on page scroll. This was created with 100% native Webflow interactions.

Here's a way to add a text reveal on scroll to your Webflow site. An eye catching animation reveals the text as the user scrolls down the page. An underline appears and then glitches the color and finally rolls away as you scroll.

An automatic timezone clock for cities around the world in Webflow. This shows the current local time for your city and then keeps it up to date every 60 seconds. Custom CSS was used for the blinking effect on the clock. Here's how it works. It uses the data attributes to define the timezone. Custom code is then used to display the local time of your city. There are separate colors for open, evening and closed office hours. These can be styled through their respective classes however you'd like. Find your timezone via timezonedb.com/time-zones. The location row element contains the data-timezone attribute, change that to your timezone. Everything else will auto update.

Here's a way to add a unique dancing light effect for the background of your Webflow site. This uses CSS for the animations which is responsive and will animate vertically on smaller screens.

Webflow does a decent job of allowing us to override symbol content, although you are still stuck with styling. This method/workaround allows you to override the symbol styling as well. This is great if you want a toggle between a few modes (dark/light) or different theme styles without having to maintain extra symbols. This works by linking a hidden text block to an override field to specify a combo class. Custom code is then used to define the combo class to the symbol relative to your trigger. This allows you to override the styles for the trigger parent, sibling or child elements. Please note that this only works on the published site.

A massive collection of 180 premade gradients that are perfect for your next Webflow project. This makes adding gradients to your Webflow site a breeze, simply copy the cloneable page with the gradients and then simply add the class to any div and you'll see the gradients added immediately. For example, you can add Winter Neva, a bluish light gradient by adding .gradient-winter-neva to your Webflow div as a subclass. In this massive pack of 180 Gradients you'll find gradients with various styles, such as angular, radial directions, and gradients with a number of different colors. The best part, these gradients can easily be modified to your own specifications as they use Webflow's native gradient functionality and all the presets have already been completed for you. Simply update the colors, direction and settings to create your own Webflow gradients.

A fun interaction that shows an image trail on text link hover in Webflow. When the mouse hovers over a text link in Webflow an image trail is shown. This effect uses vanilla Javascript to paint the images when hovering over an object.