Three Frame Hero Animation

This animation was a concept produced by the designers at our agency, as part of a landing page unveiling a new online startup community for students.

Used timers, React state, and the Animate on Scroll (AOS) library to facilitate transitions between each frame. This lightweight implementation provided fine-grained control over timing, animation logic, and straightforward debugging.

I solved the issue of the 8-second animation delay by using sessionStorage and React state to ensure the user saw the animation only once per browser session, preventing repeated delays on page reloads.

Technologies: React, React Hooks, Redux, JavaScript/TypeScript, HTML, Tailwind CSS, Next.js