Soon - Animated Responsive Countdowns, jQuery



Beautifully animated countdowns for everyone. Soon is Plug & Play and super easy to setup using the Visual Builder. Pick one of the embedded responsive preset templates as a starting point and work from there. Looking for the WordPress version, click below.
You can further customize everything to your own liking with simple attributes described in the extensive documentation. Soon is mobile friendly and responsive. It’s compatible with jQuery but you can use it without just as well. The package contains the original source files, so if you’re tech savvy you can tweak it to your own liking. If you run into trouble, I’m here to help you on your way.

Feature Summary

Visual Builder
Use the Visual Builder to build your own counters. No coding required. Pick a preset or a blank canvas, select colours, counter types, fonts, sizes. Just copy and paste the resulting snippet and you’re ready to roll. jQuery (not required)
Soon has got jQuery support, but if you’re not into jQuery that’s not a problem as Soon works without just as well. Animations & Effects
All Soons counters are animated. For instance the text counter can be tweaked with different animation types like slide, roll, twirl and fade. On top of these animations Soon brings reflections to the table. Responsive
Soon scales to the available space around it. It’s as simple as that. It does not matter where you place it, Soon will make sure it looks great. Accurate
JavaScript’s default timer will lag behind when it’s active for longer time periods. Soon contains a correction algorithm to make sure each second actually is a second. Faces
There’s three different clock faces to choose from. You’ve got your basic Text. There’s a classic Flipper and as a bonus there’s the Dot Matrix counter. All three faces can be animated in various ways and have all kinds of sub styles. Visualizers
Easily create an awesome circular counter. Use solid colours, gradients, defined counter direction and set the offset, length and width of the ring. There’s visual effects like glow and shadow plus the ring progress is animated. Next to the ring you’ve got the option to select a background fill. This is sort of like a vertical, horizontal or diagonal progress bar. Animated and colours can be changed. Due Modes
Soon comes with a wide range of countdown options. Also, well tested support of timezones.
  • 2016—02-25 count down towards a date;
  • 2010—02-25 count up since a date;
  • in 2 hours count down a fixed amount of hours, minutes or seconds ;
  • at 12:30:15 count down repeatedly towards a time;
  • sunday at 10 count down repeatedly towards a time of day;
  • Formatting
    Pick between Year, Month, Week, Day, Hour, Minute, Seconds and Milliseconds. The cascade feature allows you to move values between groups, so you can for instance count the total number of seconds till next year. Callbacks
    Bind JavaScript functions to the Complete and Tick callbacks. Useful to show or hide elements when the timer runs out, or to make changes when there’s only a couple more seconds left on the clock. Clock
    By default if you don’t set a due or since date, Soon will render a clock, so if you’re looking for a fancy clock, Soon is the way to go. Server Time
    You can manually set the time which Soon will use to do it’s calculations. API
    Soon can be setup from JavaScript using the Soon API. Allowing you to Create and Destroy counters on the fly. There’s also the option to Freeze and Unfreeze the time.

    Reviews

    Browser Support

  • Chrome
  • Safari
  • Firefox
  • Opera
  • iOS
  • Android
  • IE10
  • IE9 (no animations)
  • IE8 (no animations, automatic fallback to text counter)
  • Files

  • Original and minified versions of all CSS and JavaScript files
  • 15+ Preset Templates
  • Visual Builder
  • Version History

    1.7.1 14-03-2015
  • fixed flickering after browser tab was inactive.
  • fixed fill mode not working correctly.
  • 1.7 01-03-2015
  • added fill option which makes Soon scale up the counter to fill all available space.
  • added ‘weeks’ and ‘months’ formats.
  • added ‘milliseconds’ format.
  • added more font presets to Visual Builder.
  • added option to set custom Google WebFont in Visual Builder.
  • added freeze / unfreeze API.
  • added option to control the way Soon decides to hide counter groups on small screens.
  • improved performance of documentation.
  • improved API documentation.
  • improved timer algorithm.
  • 1.6 20-01-2015
  • added ‘hide’, ‘redirect’ and ‘function’ to on-complete option in Visual Builder
  • improved button layout for Visual Builder
  • improved browser support for Visual Builder
  • 1.5 17-01-2015
  • added onTick callback method
  • 1.4 06-01-2015
  • added CSS override field to visual builder
  • added seconds to time fields in visual builder
  • added presets select to visual builder
  • added option to create own presets to visual builder
  • added reset at time of day mode
  • added vertical and horizontal gradient mode
  • fixed bug in cross browser timezone related calculations
  • fixed ring glow color
  • fixed gradient ring problems on not full length rings and rings with different offsets
  • removed reference to soon.css.map in unminified styles.css file
  • 1.3 18-12-2014
  • added placeholder setup
  • added max-scale setting
  • added due-in-time mode
  • added due-at-time mode
  • added due-at-day mode
  • added timezone support to visual builder
  • added redraw method to API to manually trigger redraw of a soon node
  • improved responsive behaviour
  • improved script embedding
  • fixed API destroy method bug where it would not removing the soon child nodes
  • 1.2 01-12-2014
  • added a much improved visual builder
  • added dot matrix gradient fill styles
  • added ring invert setting
  • added ring gradient fill styles
  • added ring parts alignment
  • added ring separate width controls
  • added ring progress and background shadow
  • added label coloring to visual builder
  • added label uppercase and lowercase style presets
  • added separator coloring to visual builder
  • added data-auto=”false” to allow blocking of kickstart
  • improved ring label positioning
  • improved ring rendering performance
  • improved ring default shadow styles
  • improved setup of public API
  • fixed ticker reset bug where timer would not reset properly
  • fixed some incorrectly documented features
  • fixed ring soft shadow being cut of at the bottom
  • fixed ring gap preventing the progress part from reaching the end state
  • fixed the fill reflection from being flipped the wrong way around
  • fixed reset functionality
  • 1.1 13-11-2014
  • added year denominator
  • added count up mode
  • 1.0 11-11-2015
  • initial release