uzoway/creative-developer-portfolio

Creative development for the hero section of a Creative Developer Portfolio

Creative developer portfolio

Creative.Developer.Portfolio.-.Google.Chrome.2023-08-14.01-23-09.mp4

This repo is for the creative development of the creative developer portfolio website designed by Emisho you can find it👉 here, during his last community design session.

Table of contents

• Overview
• My process
  • Built with
  • Approach
• Author
• Credit

Overview

My process

Built with

• HTML5
• CSS3
• GSAP

Approach

• This was pretty straightforward. I started by creating a function initializeGsapAnimation() which gets called when the window DOM is loaded. The function contains the gsap timeline and tweens.
• In the function, I created a gsap timeline heroTl with some defaults(ease and duration) to reduce the amount of code. Then I tied all tweens to the heroTL timeline.
• To replicate the timing from the original motion design, I used the gsap position parameter "<" to make sure all tween starts at the same time. This helped me get the animation as close as possible.

Author

• LinkedIn - Uzochukwu Okafor
• Twitter - @uzoway_

Credit

Huge credits goes to Emisho🙌 for the design file and inspiration