Genius AwardsWebpage section, animations

Project:UI/UX Web Development - Specialized Page Section with Animations

Project Website ➦
Screenshot of Genius Awards website Categories section closeup Screenshot of Genius Awards website Categories section

Overview

April 2021 – Decision Counsel – Genius Awards

For the Genius Awards website, the Categories section needed to be built responsively for desktop and mobile, and have image-sequence, scroll-triggered animations that had timers. It needed to be implemented at a quick pace to meet a fast approaching launch deadline, adhere to the creative director’s Adobe XD design mocks, have the client’s desired functionality and behavior, and be integrated into their WordPress site. I accomplished these goals by proactively communicating with the team via steady progress updates and check-ins, and implementing the work using the GSAP API, HTML, JavaScript, CSS/SASS, and Git.

Role(s)

UI/UX Web Developer, specializing in animations and extended functionality.

Team

Creative director, WordPress developer (built the rest of the page), Producer

I pushed my work to the website’s dev repo, and made sure it was modular enough to be easily integrated into the existing code base and web page.

Skills / Tech Tags

Features

  • Complex, interactive logic/behavior functionality
    • Smooth & engaging UX
  • Trigger first animation category when scrolled into viewport
    •  each animation will auto play in order, in 5 second intervals
    • if user activates an animation then auto-play stops
    • 20 seconds of user no user interaction, triggers auto-play looping continues from whatever category it is currently on
  • If the Categories block scrolls out of the viewport, activity/timers “turn off”
  • Category animation button-block displays as an “active” state when “on”
  • Responsive layout for desktop, tablet, and phone devices

Tasks

  • GSAP API integration
  • Implement complex, interactive logic/behavior functionality
  • Build a responsive layout that doesn’t break functionality and UI/UX
  • Ensure animations do not play until all image assets are loaded
    • Use Async/Wait
  • Trigger image sequence according to the category block clicked on
  • Test performance, responsiveness, and browser compatibility
Screenshot of iPhone displaying the Genius Awards Categories section

Video Demos

Share 😀

FacebookLinkedInTwitterRedditPinterest

More Projects