LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / APPLICATION DESIGN II
Task 03: Interactive Component Design & Development
JUMPLINK
Instructions
Task 03: Interactive Component Design & Development
Feedback
Reflections
Task 03: Interactive Component Design & Development
In this task, we are required to develop at least six animated micro and macro interactions from Task 2 using HTML, CSS, and JavaScript to create the animation framework.
Before starting to build the animations using HTML, CSS, and JavaScript, I reviewed my Task 2 prototype to decide on the six interactive components I wanted to create. I listed them down and consulted Mr. Shamsul to ensure they were acceptable. Mr. Shamsul advised me to choose interactive components with different animations to avoid similarities, so I adjusted some of my selections accordingly.
The final interactive components I decided to build are:
- Onboarding animation
- Log-in page
- Visual feedback/Page transition
- Bottom menu navigation
- Top-up amount animation
- Pop-up/Open overlay
Onboarding Animation
I started by creating the onboarding animation. First, I added all the elements into the HTML and then used CSS to adjust the layout to match the design from my Task 2. A significant amount of time was spent understanding the logic of GSAP animation, as this was my first time using JavaScript, and it was challenging for me to grasp.
To overcome this, I searched for resources online and sought assistance from my brother to help me build interactive components that aligned with my Task 2 design. I also used console.log to troubleshoot and ensure the animations were working correctly. Additionally, I added functions to the animation, enabling it to work seamlessly by incorporating the onComplete property in the previous animation.
Figure 1.1, 1.2, 1.3 Code details.
I attempted to recreate the logo fill animation with a wave effect, similar to the animation I made in Task 2. However, I found that there were very few tutorials available online to guide me through this specific animation.
To achieve the effect, I tried my best by stacking two different SVGs together: the bottom SVG was a filled logo with orange color, while the top SVG displayed only the logo's stroke. Between these two layers, I placed a rectangle and animated it from bottom to top to simulate the fill animation. Unfortunately, the fill animation turned out to be a straight movement instead of having a wave-like effect, similar to water filling the icon.
 |
| Figure 1.4 Onboarding animation. |
Log-In Page
Next, I proceeded with creating the login page. Initially, I was unsure whether all the pages we build needed to be connected in one HTML file or separated into different files. To avoid accidentally modifying my completed onboarding page while working on the login page, I decided to build it in a separate file first and planned to reconfirm with Mr. Shamsul during class.
Figure 2.1 - 2.4 Code details.
Creating the touch-down effect was a challenge since I hadn’t learned it before—most web designs rely on hover effects. I searched online for tutorials to understand how to implement the touch-down effect for my app. Additionally, I learned to use the style.display = "none" property in JavaScript. This allowed me to hide the previous page elements when the login form slides in, ensuring that they don’t obstruct any part of the new animation. I also discovered the importance of inserting comments within the code to clearly organize the sections and pages I created. By doing so, it became much easier to navigate and identify specific parts of the code, saving me significant time that I would otherwise spend searching for previously written code.
 |
| Figure 2.5 Log-in page. |
For the page transition, it wasn’t too challenging for me as I had already completed similar animations in the onboarding page. However, creating the home page circular usage bar and carousel proved to be more complex. I had no prior idea how to implement these, so I searched online to learn from others' work and tried to apply their approaches to my project. This process was time-consuming, especially when debugging why certain elements worked for others but not in my implementation.
Figure 3.1, 3.2, 3.3 Code details.
For the circular usage bar, I learned that I needed to apply filters to the SVG to achieve effects like inner shadow and drop shadow. Additionally, I noticed some typographical errors in my Task 2 work and refined those while completing this task.
The carousel required even more time and effort to understand, as it wasn’t just a simple picture slider. It involved a combination of illustrations and text. I also had to figure out how to adjust the spacing between items in the carousel. Through trial and error and continued research, I managed to achieve a functional design that matched the requirements of my task.
 |
| Figure 3.4 Visual feedback/ page transition. |
The bottom navigation was the most challenging interactive component in this task. Initially, I attempted to use the same icon fill animation technique from the onboarding page. However, I realized that the rectangle used for the animation became visible as it moved upward, due to its color not matching the bottom navigation background. While searching online for solutions, I found very few resources on this type of animation. Fortunately, I eventually discovered a post explaining a similar effect.
 |
| Figure 4.1 Issue faced. |
I spent considerable time understanding how it worked and learned that it involved modifying the SVG file. Typically, an icon SVG only contains the stroke or fill of the icon, but this animation required two layers. The bottom layer consisted of a rectangle, matching the navigation bar's color, with a cutout of the icon's shape. The top layer was the outline of the icon. In HTML, a span element was placed beneath the SVG and adjusted to fit its size, ensuring the span became visible as it moved upward, while remaining covered by the SVG.
Figure 4.1, 4.2, 4.3 Code details.
For the billing icon, I used a different approach because it included a circular background. In this case, I applied a mask to the SVG. The mask matched the exact size of the circle background, ensuring that as the rectangle moved upward, it remained hidden within the masked area.
 |
| Figure 4.4 Bottom menu navigation. |
The touch-down effect on this page is similar to the previous page, with adjustments to color and sizing to fit the design. One of the main challenges for this page was implementing functionality where, when an amount button is clicked, a border appears around the button to indicate selection, and the amount displayed on top dynamically updates based on the clicked button.
Figure 5.1, 5.2, 5.3 Code details.
The dynamic amount change required JavaScript to handle the functionality. Since I had no prior knowledge of JavaScript, I relied on online resources and occasionally asked ChatGPT for assistance. I spent time trying to understand how the code worked and adapted it to match my requirements. This process involved trial and error, but it allowed me to gradually learn the basics of JavaScript and apply those concepts effectively in my project.
 |
| Figure 5.4 Top-up amount animation. |
This pop-up appears when the user attempts to exit the payment page after selecting a payment method. It serves as a confirmation to prevent accidental exit. The pop-up will be triggered when the user clicks to leave the page, ensuring they don't lose their progress.
Figure 6.1, 6.2, 6.3 Code details.
 |
| Figure 6.4 Pop-up. |
Final Interactive Component Design & Development
File compilation
Link to Google Drive
Figure 7.1 Video presentation.
Week 09
Week 10
Mr. Shamsul mentioned that each interactive component should be saved in a separate file to make it easier for him to review and for better clarity. He also commended the progress made in the completed animations and encouraged continuing the work. This approach helps to keep everything organized and makes the review process smoother, allowing for focused feedback on individual components.
REFLECTIONS
Experience
Throughout this task, I found the process both challenging and time-consuming. My lack of prior knowledge in JavaScript and coding animations made it difficult to troubleshoot issues when the animations didn’t work, as I often struggled to identify the problems. Additionally, for several animations I wanted to create, there were very few online tutorials available to guide me. There are still a few more pages that need to be developed for the final project to complete the task flow, and I feel a bit concerned about managing that. However, I’ve learned a lot through this task, even if my work isn’t entirely accurate due to the self-learning approach I had to take while building these interactive components. I believe that with enough time to fully understand the logic and basics of JavaScript, I could significantly improve my ability to create interactive components.
Observation
I observed that I always forgot to put semicolons or closing tags, such as }. This often caused the functions to fail, and I would assume I had typed something incorrectly, only to later realize it was a missing closing tag. Coding requires patience and logical thinking, as it involves using precise instructions to communicate to the computer what animations or functions you want to implement. I also learned the importance of organizing code files well. At the beginning of this task, my class and ID names were somewhat confusing because I used many similar names. As a result, finding specific elements took more time than necessary.
Findings
I found that design and coding are very different disciplines. Design provides an immediate visual representation of layouts or concepts by arranging images, icons, and text. In contrast, coding requires inputting all the necessary data and instructions, then using logic and syntax to adjust and align everything. Sometimes, the code doesn’t work as expected, requiring alternative approaches to achieve the desired layout.
Comments
Post a Comment