Landing page Interface design & Motion study

In this project, I break apart, study and reassemble a landing page clone of Abeg.app ⭐

The highlight of this project is the ease with which the design moves from static Interface design to Motion design thanks to the superworkflow bridge between Figma and Aftereffects - provided by the aeux.io plugin 🛠️

My Process ⚡

💎 Took screenrecording of the website with camtasia - https://no-dey-beg.netlify.app/
💎 Opened it up in Premiere Pro where I went through the video - eyeballing the easings frame by frame. A more comfortable alternative is inspecting element, copy the cubic-bezier values. Plug that in the AE flow plugin, and you have your easings on your keyframes
💎 Took screenshot of each screen state, and arranged it in Photoshop to be used as reference in the next step
💎 Built the interface design pixel for pixel in Figma
💎 Exported the frames to Aftereffects with AEUX
💎 Used a lot of precomps, ensured consistent animation timing, delay, and offsets
- AE Plugins Motion tools, AEUX, and Easecopy really made life easy

🎁 The work files are available for download in the attachment. Also find the High Res video

Please like, and share if you enjoy this. Thank you!

Follow me on Twitter - http://www.twitter.com/iamfaithkenny

Clone website built by - https://olamiday.netlify.app/
Abeg app design by - https://dribbble.com/dare_adekoya_

Cheers