Application Design II / Task 3 - Interactive Component Design & Development

on
13/6/2024 - 8/7/2023 (Week 8 - Week11)
Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Task 3 - Interactive Component Design & Development

INSTRUCTIONS



In Task 3, we need to implement the micro and macro animations that we planned in Task 2. Using coding languages like HTML, CSS, and JavaScript, we will code all the animations and transitions.

Here are the animations applied to different screens:
  • Startup logo animation
  • Onboarding transition
  • Bottom menu navigation
  • Side panel transition
  • Make offer pop-up
  • Credit card animation

1. App Startup Logo animation

For the startup, I animated the app logo using After Effects and exported it as a GIF to be loaded in the code. The signup panel slide-up animation was created using GSAP's `{gsap.to}` and `{gsap.fromTo}` functions to move the logo up as the panel slides in.



HTML, CSS, JavaScript Code Details

2. Onboarding animation & transition

I have three onboarding screens, each featuring different animations to introduce the user to the MVP of this app. The status bar at the top indicates the user's progress and the number of onboarding screens remaining. For the content, the text slides in from the left, and the animations fade in the middle.





HTML, CSS, JavaScript Code Details


3. Bottom menu navigation animation

The bottom menu will feature a float-up animation for each navigation item, starting from Home to Profile. When a specific page is active, the corresponding icon will slide up and be highlighted with a bold effect, accompanied by a circle background. This will make it clear to users which page they are currently on.

4. Side menu navigation animation

When the hamburger icon is tapped, the side menu will slide in from the left. To enhance the visual effect, the menu options will slide in sequentially. Additionally, the theme toggle button and text will switch on and off, providing a dynamic interaction.

5. Make offer overlay animation

The "Make Offer" overlay will have a gradient stroke that animates around the box, creating a striking and special effect. This visual cue is designed to impress users and prompt them to submit their desired offer price.


More animation will be add:

  • Card swiping animation
  • Payment Method animation
  • Price Bar chart animation
  • Payment Slide button

Walkthrough Video Presentation



Comments

Post a Comment