A Total Eclipse will pass across the entirety of the continental United States on August 21, 2017. It’s not something you see every day. The event is garnering a lot of press. Some websites even have cool animations of the eclipse. That’s when I started wondering, “I probably could build that in Hype.” So, that’s what this week’s free template is about.
Without any special JavaScript programming, just using the basic features in Hype, I was able to create an eclipse effect. There are a few main features to make it work.
Motion Path – No special graphics are required for this project. Just a simple “Ellipse” element is used to create the moon. By making the width equal to the height, the ellipse becomes a circle. By using two points on the timeline, the circular element can move across the scene. But by simply bending the path, it now travels in a more celestial arc.
Brightness – This “Filter Effect” creates that eery feeling of the sky turning dark. You can almost feel it – the light dimming, the temperature dropping, the night sky suddenly appearing. By making the “Sky” and “Grass” elements darker, it makes the animation feel more alive. Just a few clicks is all it takes to create a dramatic animation.
Opacity – Instead of having a black moon arc across the sky, the element starts out invisible. It stays this way until it crosses the path of the sun’s light. Then, when the moon clears the space of the sun, the moon becomes invisible again. Animating this process is very similar to the previous effects.
I also created a “Corona” element to give the project that iconic eclipse look. When the moon element is centered with the sun element, a bit of blurry white leaks out from the sides. I also blurred the horizon line with a second layer of grass. If you’ve been following these projects from the beginning, the blurred grass effect was also used in the Coconut template. These subtile tweaks to the project can make it feel more realistic. But again, this was accomplished without special JavaScript code or additional images. The whole project was built with just the basic features of Tumult Hype.
Download the Eclipse Template to see how it works.