calendar mockup

Daily UI #038 - Calendar

calendar transition animation

A simple minimalist calendar app. Days with events on them are circled, with the number of dots around each one representing the number of events on that day.

The list view shows all the events in a given month, so you can see all the events you have coming up.

Did a nifty little animation in after effects to show the transition from the calendar view to the list view. Having the days fly across gives users a link between the two screens and gives a feeling of consistency.

Also discovered a useful "intertial bounce" after effects expression that you can see when the calendar events slide in from the right. It adds a little bounce effect to elements entering in, and uses some cute physics so that the bounce effect adjusts depending on the velocity at which the element was moving. You can adjust the amplitude, frequency, damping/decay of the oscillation to make the bounce as subtle or obvious as you need. I chose a pretty subtle one to avoid it looking like some crazy 90s powerpoint presentaiton.

amp = .1;
freq = 2.0;
decay = 2.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0 && t < 1){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}
{{ message }}

{{ 'Comments are closed.' | trans }}