My animation was done in GWD and a Google Drive link was shared to the UIDev email address.

For my animation, I wanted to make an upper banner for my website. Instead of a landing page animation, this banner would simply be present on all pages at the top, just above navigation options. As such, I made the banner include my logo in the upper left corner where it would normally be on a web-page. Additionally, I made it so that the animation was a transition between two static images, a daytime and nighttime version of the same landscape. This effect is intended to coincide with page-wide CSS changes which would switch the entire page from a light themed page with dark text to a dark themed page with light text. This sort of night mode is becoming increasingly popular in all UI’s so I figured including it in my website, and creating a cute animation for the transition, would be a good choice.

While it is not yet implemented, the intent of the animation is to toggle back and forth between night and day with each click of the button. Reversing the animation should be relatively straight forward as HTML5 includes an animation.reverse() function. Additionally, the button would be labeled “Day” and “Night” or rendered graphically in this case.

While the animation is not very long, it is meant to coincide with a button press and a CSS change that would normally occur instantly. Additionally, any attempts to increase the length of the animation ended up just making it feel sluggish without adding anything. As such, I focused on making all of the short motions snappy and expressive, with ample squashing and stretching of the sun and moon as they start and stop moving. Additionally, I focusing on getting the timings between the sky rotating and the ground color changing and clouds flying away right so that it all felt cohesive and that it provided the illusion that it actually changed from day to night and also to make the clouds look like they are being physically pushed by the night sky rotating.