Webflow Code Snippets

Automatically scroll a user to the top of page on a tab change on your Webflow site. A simple Javascript code snippet that allows for you to scroll users to the top of your site based on your selected class.

Add Facebook's open graph meta information to your site to optimize the information when something is shared on Facebook from your site. Optimize this even more by hooking up Webflow CMS to Facebook's open graph meta.

Do you want consistency with your Webflow designs? Truncate multi-line texts with ellipses based on 2 or 3 lines of your choosing via CSS. This helps keep your designs uniformed without needing to set max height limitations by truncating text that goes beyond a certain length.

Add a delay when a user clicks on a link on your Webflow site. This functionality adds a nice delay to your Webflow site before the users hit the next page.

This allows you to create a view all/show less on your Webflow's pagination collection list via a simple Javascript code snippet. Toggles the height of each item multiplied by the number of items you want to show.

Easily update Webflow's native bullet list color with this simple CSS script. Updating Webflow's native list color is actually simple with this custom CSS script.

A fun unique way of adding a random sticker to your Webflow site on click.

Play a Webflow interaction after clicking on an element X number of times on your Webflow site. A unique way to create unique interactions that are based on the number of times an element is clicked.

Automatically show a modal or div after X minutes once the window/element has been hidden/closed in Webflow. A great way of showing advertisements, alert messages and so forth based on a time interval between the last time it was viewed.

Add or remove form input fields with buttons on your Webflow site. This allows your users to add or remove form fields based on buttons on your Webflow site. A great way of adding dynamic form elements to your Webflow site.

This allows you to show or hide items based on date or time in Webflow. This is great for event based information, you can display various elements based on if its prior to a time or after a specified time on your Webflow site.

Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.

Hide an element on your Webflow site after click with a cookie via this Javascript snippet. This is perfect for welcome modals, cookie notifications, notification alerts and other items that only need to be displayed a single time.

This allows you to randomize the text on a button click in Webflow. A fun way of displaying a variety of different texts when a user clicks on a button on your Webflow page.

Automatically pause or reset a Vimeo video on modal close in Webflow via this helpful Javascript code. This prevents Vimeo videos to continue to play if they happen to be in a modal on your Webflow site.

Add an outline (stroke) effect to text elements on your Webflow site with this CSS code snippet.

This simple CSS code snippet allows you to fade items that are not currently hovered on your Webflow site. This is perfect for navbars or other elements that you want to emphasize the hover state on without building unique hover states or using interactions.

Create a custom scrollbar for your Webflow site with this CSS code snippet. Change the boring, static browser scrollbar design of your Webflow site to a unique design.

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

Change the default native Webflow lightbox background color with this custom CSS code snippet.

Add a Vimeo video as a background video on your Webflow site using this custom CSS code. If you've wanted to add a Vimeo video as a background video you'll see that it's not possible natively in Webflow. This CSS allows you to add a Vimeo background video to your Webflow site.

Here's a way to create autoplaying tabs in Webflow using JS. Autoplaying tabs allow for tabs to automatically rotate between tabs based on a time of your choosing. Keep in mind that this method uses the click method and could cause problems if you are using forms or other interactions that rely on mouse click functionality.

Add Particles.js to your Webflow site with this simple CSS and JS code snippet.

This is a way to determine when the Attributes solutions have finished executing and then run your own javascript that needs executing after.

Trigger a click on another element when one element is clicked in Webflow. This is perfect for allowing one element to control a click of another element.