App Design 2: Task 3

18/11/2024 - 16/12/2024
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
App Design 2
Task 3

---

INSTRUCTIONS

---

Task 3

In Task 3, we will create the micro and macro animations outlined in Task 2. This involves coding all the animations and transitions using HTML, CSS, and JavaScript.

App Startup Logo

For the app startup animation, I used CSS keyframes animation.

Fig 1.1 App Startup Logo

 

HTML, CSS Code

Flight Selection

Fig 1.3 Flight Selection

HTML, CSS, and JavaScript Code

Passenger Details Slide Bar and Fade Bar

Fig 1.4 Slide Bar and Fade Bar

HTML, CSS, JavaScript Code

Reflection

Embarking on Task 3, which involves creating the micro and macro animations outlined in Task 2, has proven to be both a challenging and eye-opening experience. The process requires coding animations and transitions using HTML, CSS, and JavaScript, skills that I am still in the early stages of mastering.

One of the biggest challenges I have faced is my lack of experience in coding. While I understand the basic concepts of HTML and CSS, implementing animations—especially those that require JavaScript—has been overwhelming. Writing clean, functional code that ensures seamless transitions has been a trial-and-error process. I often find myself stuck debugging small mistakes, such as syntax errors or incorrectly targeting elements, which can consume a significant amount of time and energy.

Additionally, understanding the logic behind JavaScript functions for animations, such as handling event listeners or utilizing keyframes effectively, has been daunting. The complexity of combining all three languages to achieve the desired effects often feels like assembling a puzzle without knowing exactly how the pieces fit together.

Despite these difficulties, I am gradually making progress. By seeking online tutorials, consulting peers, and practicing through trial and error, I have begun to develop a better understanding of the tools and techniques required. These challenges, while frustrating at times, have motivated me to improve my coding skills and explore new problem-solving strategies.

Ultimately, this experience has underscored the importance of persistence and adaptability. While I am not yet fully confident in my abilities, I am determined to keep learning and refining my approach. Task 3 has taught me that growth often stems from overcoming obstacles, and I am optimistic that these struggles will ultimately lead to a deeper understanding of animation development.