/modern-nextjs-animation-website

Modern NextJS 3D Website with ThreeJS, GSAP Animation, React

Primary LanguageJavaScript

Live Server: https://modern-3d-nextjs-animation-website.vercel.app/

NextJS project to learn how to implement GSAP and review a previous project

WHAT I LEARNED:

  • Fundamental react project architecture and folder structure

  • Next13 application structure

  • Fundamental CSS properties to master flex using Tailwind CSS

    • No BEM & Kinda ugly class names (complicated to use :before, :after), that makes harder to find Components in Dev Tools
    • Tailwind and Class Name Props don’t mix well

  • Implement GSAP Animation: From soft and pleasant animations to complex gradients

    • Need to improve: Re-implement same GSAP Animation into different Ref, Components

  • Perfectly placed media queries for satisfactory responsiveness covering almost all devices using Tailwind CSS