Icons

 

I created icons for each of my pages.

 

These icons will act as traits that one can pair with that scene and how it then relates to time as a whole.

 

Hour_00000.pngx_00000.pngUpDown_00000.pngexport_00000.pngstar_00000.pngRepeat_00000.pngGrave_00000.pngFlower_00000.pngthree_00047.png

 

 

“Time Flies” Process

This scene was a lot of fun!

I used a lot of referencing to guide the style and composition.

I created 2 static loops that the user can trigger between. I added a switch animation that morph these scenes together.

Time_Flies_Day-animate.gif

Morph:

Time_Flies_sdfbte.gif

 

Time_Flies_Dasfe.gif

I added some finishing touches on the night sky scene in Ae just to give it some ambiance.

 

“Legacy” process

For this scene I created a looped animation that the viewer can trigger.

After the scene was created I animated the line work in Ps and then added color to it.

Legacy.gif

In Ae, I used the “Roughen Edges” effect to make the water ripples and used turbulent displacement to bulge separate textures on-top of the water.

 

Annotation 2019-05-05 145119.jpg

 

Home layout

I struggled a lot with the Home type layout.

I tried several versions and here are the two I liked the most:

type options.pngtype options2.png

I ended up choosing the bottom one. It sat a little better for me and the weight fits better with the flow of the waterfall.

“Relative” process work

I built the scene by using a isometric grid as a guide to create my buildings, and constantly referencing my home page to keep the style and composition consistent.

 

After the scene was created I made 4 loops of separate buildings so that they will have a textured cell look to them. I can then make them move up and down in Ae.

 

Annotation 2019-05-20 224051.jpg

 

 

Relative.gif

I create a comp full of these buildings moving up and down and then add the background in Ae and mask the buildings to fit the scene

 

buildings_00024.png

 

buildings_00023.png

Home Parallax

Dealing with the animation in the home page became difficult, since it was the most detailed and complex animation on the site.

Luckily There was no interaction necessary, but I added a parallax, which was a bit more complex than I thought. There is a way to ad the effect in Animate, but the code is a nightmare to figure out and I spent a lot of unnecessary time figuring out something that should be very simple. I found a different solution by putting the parallax on some elements (including my Navigation buttons) and putting the rest in a video as a background Url.

Relative Concept

Time is relative.

This page has less to do with Einstein’s theory of relativity and more with the way we perceive time.

The past, present and future is blurred, because it is only relevant to us as the ones experiencing it. One person’s past is someone else’s Future and vice versa.

For this experience, I want the user to be in control of the time line, but with no direction of where to go. My thought is to create a scene where the timeline is scrubbed through by the position of the mouse.