Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Getting started
Jose Tamu
December 31, 2024 /  Intermediate

Countdown

Days
Hours
Minutes
Seconds
TYPE 1 - Time until: December 30, 2030
Minutes
Seconds
TYPE 2 - USER SESSION: 30 MINUTES

Settings controls

Countdown Type: there are 2 countdowns available: an End Date or a User Session.
Timezone & Date: the date and the place when the Countdown will count to. If the user has a different timezone, the countdown displayed wil adjust to this user’s timezone at that moment. Requires Countdown Type to be “End Date”.
Session End Date: It will start counting as soon as the user enters the website. Each Session End Date will be stored in the browser’s user, so it will be persistent across page reloads. The name of the key is the End Date itself.
Custom Javascript: the Javascript set here will be triggered when the countdown ends. It is quite common to just set the countdown’s display to none.

Units style

Units Wrapper is the wrapper of each Days, Hours, Minutes and Seconds with their units. You can use the Padding control to set a spacing between them and the Gap control to set a spacing between the units label and the units.
To change each Label text, Hide units, change the Units width and set custom Typographies, you can use the Units section.

Units Animation controls

Fade From: the initial opacity that will be animated to 1. If you want only to translate the units and remove the fade, then set this value to 1.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

On this page