Current Year JS
.svg)
Cloneable tags
Description
The Current Year JS cloneable is a simple and convenient tool that can help you keep your Webflow site up to date with the current year. With this javascript code, you'll never have to manually update the copyright year or any other year on your site again. To use the Current Year JS cloneable, simply add the custom code found within the body tag section in Page settings, identify the div, and you're all set. This cloneable, created by Aviv Shwartz, is categorized under Date/Time and is a great way to ensure that your Webflow site is always displaying the correct year. The Current Year JS cloneable is an easy and effective way to automatically update the year on your Webflow site.
A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.
A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.
A full page Calendar with week/day/month setting and works with Webflow CMS. This full page calendar design relies on custom stylesheet and JS to work so you'll need to copy both the CSS and JS found in the head and closing body tag of the page settings. Please note that this is primarily driven via CSS and thus Webflow's designer becomes rather useless for the design other than the Webflow CMS elements tied to it.
A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.
A unique way of creating an interactive scrolling timeline within Webflow. This demonstration provides a Covid timeline as an example for it's implementation. The animation is based on while scrolling into view with a scale of the line div blocks from 0 to 1. A
A great way of adding a date/calendar picker to forms or other elements within Webflow. Provides the essentials to get it added in 30 seconds and easily configurable based on your own style. Inherits the <body> typography. Please note that the date picker does require custom code found within the Page Settings. This utilizes Datepicker.js to create the date picker and the styling allows you to further customize the styling.
Add a countdown or launch date timer to your Webflow site with this cloneable. Have an upcoming launch for a product or service? Add a countdown timer via this cloneable and JS snippet. Simply update the JS code with the date and time of your event, match the style and make sure you have the relevant parent element ID and relevant divs setup and you'll have a countdown timer. In this example you can show the days, hours, minutes and seconds till your chosen launch time. This is perfect for any product or service page or events page that has a launch time associated with it.
Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.
Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.
Here's a way of creating an autocomplete style search input in Webflow via a small JS snippet. This is perfect for giving your users autosuggestions as they search based on items within your native Webflow CMS list. Be sure to add the custom code found within the closing body tags of the Page Settings for this to work properly.
Here's a way to add background video, with sound, to your Webflow site that features a mute/unmute button. This is completed using plyr.js plugin and works on any Webflow site. Perfect for background videos or other sections that require sound/audio but with the ability for users to mute and unmute. Be sure to add the html video embed, as well as the plyr.js code found in the closing body tag section of the Page Settings.
Here's a way to add an underline effect to your Webflow headlines and text. The underline is fully editable to customize to your requirements.
Ever wanted to achieve slanted/diagonal sections on your Webflow site? With this no code technique you'll be able to create a Webflow section that isn't flat but has a slant or diagonal edge between sections.
Never change the copyright year or other year on your Webflow site again. With this simple javascript code you'll be able to have years automatically update on all of your Webflow sites. Simply add the custom code found within the body tag section in Page settings, identify the div, and you're all set.
Here's a unique contact form designed as a chat widget in Webflow. Perfect for simulating a chat widget on your site without paying hefty fees. This gives the user a feeling of a live chat element that's hooked up to Webflow's native forms.
Add dynamic, auto changing tabs to your Webflow site. These tabs can be changed automatically based on a time interval. Add a dynamic layer to your Webflow native tabs via this unique interaction.