Webflow sync, pageviews & more.
NEW

Dashed Slider Overlay

Try the cloneable below

Cloneable tags

Description

The Dashed Slider Overlay is a custom slider element for your Webflow site that features dashes instead of dots and allows users to navigate between slides using mouse clicks. It's a great way to add a visually appealing and interactive element to your site, and the custom cursor that appears when hovering over the slide adds an extra touch of polish and professionalism. This cloneable component was created by Ben Parker, a skilled designer and developer, and it falls under the categories of Slider, Hover, and Interactions. Whether you're looking to create a dynamic and engaging user experience or simply want to add a visually striking element to your site, the Dashed Slider Overlay is a great choice.

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 fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

Another stunning snapping slider design for your Webflow site. As users scroll down the page each section elegantly snaps to the next slide effortlessly. Beautiful transitions change both the primary image, and background image of the relevant sections. The slides information is all driven by Webflow's native CMS system powered by GSAP, and Swiper.js. In order for this to work you'll need to add the relevant code found in the page settings, both body and head.

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.

An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.

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.

DRAG
Real-time sorting by

Add a character count to an input field on your Webflow site. This is perfect for creating limitations or showing the character count of an input field.

Using Airtable and No Code API to power the job listings of a Webflow site rather than using the CMS.

Here's a way to utilize List.js with Webflow native CMS to create filtered and searchable lists within your Webflow site. This helps users filter specific information and details from a large list quickly and easily from within your Webflow site.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

Here's how to utilize a Deck of Cards API via GitHub, VS Code and jsDelivr with your Webflow sites. Be sure to check the tutorial video and GitHub repo to tie it all together. A nice way of understanding how to make Webflow content even more dynamic via the power of low-code.

A simple countdown/launch timer for your Webflow site. This demonstration utilizes a custom script in order for it to work properly. You'll need to include the script found in the HTML embed in order for this to work properly. You'll also need to udpate the date and time to the future date/time that you'd like for it to count down to. This script allows you to customize the countdown timer to your own local date and time so that it works properly for any time zone.

DRAG
Real-time sorting by