Halla InfographicWebsite Animations

Project:Website Animation Development

Project Website ➦
Screenshot of Halla Search animation Screenshot of mobile version for halla infographic

Overview

Decision Counsel – Halla – 2021

The Halla.io website needed to launch strong with an animated infographic to showcase Halla’s services. The website was made by another developer, while I was hired to implement this responsive infographic section of animations.
The animation is made so that the user can select the 3 states via the tab selector at the top, which displays slightly different results on the graphic.

Role(s)

Web Developer specializing in UI/UX and animations.

Team

Size: 3+
Members: Designer, WordPress Developer, Producer

Skills / Tech Tags

Features

  • the graphic animates in when the user scrolls onto its block
  • change states automatically at a 5-second interval
  • also allow the user to click between states
  • the shopper “traits” (bubbles around their photos) pop in
  • the word “breakfast” is typed in the search field, and
  • the result cards at the bottom scroll horizontally into view.
  • tabs are accessible with keyboard support
  • layout is responsive- mobile has a slightly different layout, but same functionality

Tasks

  • Integrate GSAP API
  • Make section modular and easy to integrate with the home page
  • Set timers and scroll triggers for the animations
  • Build the layout responsively for desktop and mobile
  • Ensure its accessible
  • Optimize assets and code for best performance

Mobile Video Demo

Desktop Video Demo

Responsive Video Demo

Share 😀

FacebookLinkedInTwitterRedditPinterest

More Projects