SNKRS Landing Page

What is the project?

This is a landing page I made for the module Motion Design where I brought animation and screencasts to life on a landing page I designed. It made it about the SNKRS app, but it has no connection to the app or Nike.

How?

I started to design the website in Adobe XD. After the site was designed I recorded & edited the screencasts with Adobe After Effects, created my own illustrations in Adobe Illustrator, and brought them to life with several animations in Adobe After Effects. For the web implementation, I used lottieFiles with the bodymoving library. The assignment was to start in a landing page template and make it your own by customizing it. I changed most of the code and it was a whole different website then the template once done. I also added my own scrolling animation where I used images of StockX & put them in a video, based on the scrolling over the element, the video frame changes, so when you scroll down the shoe turns around. I learned a lot from this school assignment.