How's 2024 getting on?
Live animation updated daily
DESIGN / ANIMATION / CODING: GUY WITH RED BEARD
A quick, fun project to show what percentage of the year has passed.
There are special animations for certain dates, so be sure to check back regularly!
So how does it work?
The first timeline at the 0% state
The second timeline at the 100% state
In a nutshell, it’s a combination of Rive and coding.
All of the animations were built in Rive. We can build in conditions for the animations, meaning they will do certain things based on our input. Here, the progress bar will move and the text will update based on the data we get through JavaScript. We can also click on the bar to see how many days are left, as well as switch between a “%” or “x/366” on the red tab.
Using only two timelines, we blend between the two based on the day number of the year. For example, St Patrick’s Day is on the 77th day of the year, so the progress bar input is set to 77. As it’s a leap year, the math is calculated at (366/100)*77, which will give us the percentage.
The file-size is also incredibly small, in this case 226KB. Yes, you read that right.
The layout and condition for “Special Days” in Rive
With this, we can create complex animations that will run butter smooth on a website or app. And more importantly, allow the user to interact with the animation, making the experience a lot more appealing.
