Full Screen Web Based Animation – https://www.youtube.com/watch?v=_8stZmo8y1M
For the web design I used Photoshop as I find PSD files to be the best and most efficient format to work with in After Effects since each layer can be converted into its own composition giving you full control over individual elements. Going back to the design thought process I started off by setting the background to fit the overall aesthetic of the project. I then added an overlay of a distorted weathered wall texture onto a black canvas sourced from Unsplash creating a very strong and gritty backdrop. Over the subject I added a paper texture and applied a vivid light blend using the forest green from the brand guidelines making him stand out from the background and tying the image directly into the brand identity. I then turned my focus to the typography placing the navigation menu in the top left and the main title prominently across the frame using hierarchy principles to guide the viewer’s eye in a order. The colour choices throughout were a direct extension of the brand identity and overall the web page design really brought the brand to life.
To start, I imported the PSD file into After Effects and stripped it down layer by layer. I focused on the typography first to establish hierarchy using position keyframes to animate the elements into frame for example having “Clout Corner” rise up while the logo drops down. I applied Gaussian blur and refined the easy ease graphs to make everything flow smoothly into the composition. I then animated “Music” “Fashion” and “Culture” sequentially using the text animator tool with scaling to create depth and a clear visual journey for the viewer.
For the main subject I used a wipe effect combined with easy ease adjustments to achieve a sharp sudden swiping entrance. Finally, I converted the background into a 3D composition and applied a wiggle expression to it creating a subtle collage like movement that brings the whole piece to life. Once again poor layer organisation slowed me down initially however correcting this helped me build better habits and made fine tuning positions and adjustments significantly easier going forward.
Reference
Images used – Unsplahsed – hip hop (2026) https://unsplash.com/s/photos/hip-hop [Accessed 30/04/26]