Alpacka._.Hero.Section.-.Google.Chrome.2023-05-12.04-48-50.mp4

Alpacka landing page

This is a recreation of one of the designs of the super-talented Gil Huybrecht. I am a huge fan of his work and when I saw this particular hero section design/prototype, I decided to recreate it using HTML, CSS and JS. It is a hero section of the landing page of one of his ongoing project for Alpacka. It was a lot of fun figuring out the right timing and easing for the animations. Those are two key parts of a good animation.

Table of contents

• Overview
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

Overview

My process

Built with

• HTML
• CSS
• Vanilla JavaScript/GSAP

What I learned

I always see a new project as an opportunity to learn something new. And web explorations like this gives me that opportunity. Before starting the project, I already figured that I was going to have an issue getting all the moving parts in the hero section move in at the right time. It had to be smooth. To achieve the animation, I created two GSAP timelines - counterTL and heroSectionTl. The counterTl timeline contained the preloader counter, alpacka logo and getting to slide up the preloader screen on completion of the counter. The heroSectionTl timeline contained the animations on the hero section ranging from the navigation, video media and its paragraph. The animations are contained in the script.js file.

So working on this project gave me the opportunity to learn and improve my animation sequencing skills.

Author

• LinkedIn - Uzochukwu Victor Okafor
• Twitter - @uzoway_

Acknowledgments

Huge credits to Gil Huybrecht for the design. I am huge fan of his work and decided to recreate this particular one.