Application Design II - Interactive Component Design & Development (Task 3)
25/11/2024 - 16/12/2024 (Week 8 - Week 12)
Katelyn Tan Kye Ling
(0354148)
Bachelor Of Design In Creative Media (Application Design II)
Task 3 - Interactive Component Design & Development
LECTURES
WEEK 9 - 18/11/2024
This week started off with a tutorial on how to use gsap to get our
animations. We watched a video first and understood how to install it and
add it into our html file. After that, Mr. Shamsul showed us one example
of how to add an animation code from gsap. Then he asked us to create a
new file in dreamweaver and try to add an animation with a code from gsap.
Here was what I did:
Fig 1.1 Week 9 In class Exercise
After that I discussed with sir on which animations I would be working
on for task 3. He also gave me some tips on what to explore on like
"add event listener" and also what animations would be better to
improve my app.
WEEK 10 - 25/11/2024
This week onwards is consultation sessions only. I showed sir my work I
did so far and asked him how to apply the transition for the onboarding
section as I wasn't able to. He then showed me a code that I could refer
to. After some trial and error, I was still struggling so I asked my
friend if she knew how to do and she figured it out and kindly taught me
how to do it. However, I was only able to do when one page goes to
another but not backwards as the page has "position: absolute". Time
passed really quickly just trying to fix 1 transition, and then class
ended.
WEEK 11 - 2/12/2024
We had online consultation this week. We chose our slots through
Google Classroom. I chose the 9.20AM - 9.40AM slot. I showed Mr.
Shamsul my problems I had in the app, however the problem couldn't be
solved as we didn't know where the main issue was. So Mr. Shamsul
asked me to send the file to him so he could check.
WEEK 12 - 9/12/2024
Mr. Shamsul said we could come to his office during class hours for
consultation if we need to. I didn't have much to ask him so I did not
go for the consultation and just continue my assignment on my own.
INSTRUCTION
For this task, we had to pick 6 main features/animations from our app's
prototype and code them out with html,css & js. We will build
upon the knowledge gained in Task 2 to create micro-interactions and
animated micro-interactions for their app.
Pages/Animations I decided to work on:
- Onboarding pages transition
- Log in slide up animation
- Welcome animation
- Add to cart pop up in item page
- Place order transition + animation
- Order history page transition
1. Onboarding Pages Transition:
I first started off with coding the first onboarding page. Then I did
the other 3 onboarding pages by copy pasting the code of the first
onboarding page and replaced the text and images. After that, I linked
the arrow buttons and the skip button to wherever page the button should
take you. Next, I tried doing the slide in and out animation. I was
struggling with this part a lot, because gsap only had codes for
singular element transitions. So I researched on how to easily apply an
animation to the whole page and this took me quite some time.
I decided to go to school and ask sir and my classmate how to do. I
ended up learning from my friend and using a gsap code while also having
to tweak the code a bit according to my app.
I could go from one page to another but however could not go backwards
as all my pages had "position: absolute". After some researching on my
own, I was able to get it to work. I found out that the JavaScript had
some issues. The going to next page code couldn't be applied to the code
for when the page goes backwards.
Fig 1.1 Code used for onboarding transition
Fig 1.2 Onboarding pages transition
2. Log In Slide Up Animation:
I coded the entire page successfully at first. However, after that when
I was told not to use px, but use em and % so the app is responsive, I
had to change and alter a few numbers here and there. After some
adjusting, I wasn't sure why but I couldn't make everything justify to
center. I left that aside first and tried working on the animation. I
used the code below but I did not want it to have a trigger, I just
wanted the animation. And after exploring around, I was able to get the
slide up animation I wanted.
Fig 1.3 Code Reference for Log In Transition
Fig 1.4 Could not centralise
After reading through my code countless of times, I realised that I
added margin left and right to some elements which caused some of the
boxed to not be able to be the same length. However, the elements
still were not in the center of the page. So I decided to just add a
bit of padding-left to the side.
Fig 1.5 Log in slide up animation
3. Welcome Animation:
I first coded all the elements that the animation needed. I was
easily able to do the slide up transition for the text. However for
the scaling of the logo and the mascot, I tried many times but wasn't
able to to it. Same for the colour transition from the button that
grows to the entire page. After trying things out here and there, I
was able to complete it! I first set the initial size of the mascot
and logo then after that the animated size I want it to become to. In
the code I used scale up along with an ease in and out transition so
it looks smoother.
Fig 1.6 Welcome animation
4. Add to Cart Pop Up in Item Page:
At this state since it was the fourth feature, I slowly started to get
the hang of it. First I coded the item page. For the 3 buttons at the
bottom I only made the add to cart button into a functional one
because the other 2 buttons were not of any use in my user task flow
that I had to code for the final project. After that, I coded the pop
up part of the add to cart button. It took me a while to figure out
how to get it to slide in and out. I used the similar code as the
welcome animation one where I first set the initial state (which is
outside the page), and then set it to the state I want it to animate
to (which is the bottom of the page).
Fig 1.7 Add to Cart Pop Up in Item Page Feature
5. Place Order Transition + Animation:
First I coded the cart page along with the pop up to ensure the
user really wants to place order for error prevention. After I
made sure the buttons were working, I linked the button in the pop
up to the loading animation that led to the order complete page
which I created in another file. The cart page took me the longest
to code out of all the 6 features because there were a lot of
elements which means more adjustments to make.
Fig 1.8 Place Order Transition + Animation
6. Order History Page Transition:
This one was pretty simple as the coding was mostly made out of
boxes and wasn't as challenging as the cart page. However, the
transition took me some time to figure out. Though it is the same
concept as onboarding, these 2 pages were in different files as
they were not in the same "section". So linking them took me some
time.
Fig 1.9 Order History Page Transition
VIDEO PRESENTATION:
FEEDBACK
Week 9 (18/11/2024):
- Explore add event listener.
- Category section transition should be slide in and slide out.
- All different pages in different files, later on can link all of them
together.
Week 10 (25/11/2024):
- Don't use px, use em and % so the app is responsive.
REFLECTION
Experience
This project was really difficult and challenging for me. It was my first time coding an app with so many pages, components and elements. It was also my first time doing animation in coding, so there were a lot of things I had to learn and figure out myself. There is a success rate when it comes to coding something as you have to figure out what to change and what went wrong. However, when I saw the transitions work and my page slowly start to build one by one, it felt so satisfying. I learnt a lot from this task and hope that I would work much better and faster in my final assignment.
Observation
I observed that understanding the basics is really important. Without understanding what terms to use in what situation can cause your code to go haywire. Staying organized was a big lesson. Giving proper names to classes and keeping my files tidy made coding much easier and less confusing. Asking for help really made a difference. Whether it was from my instructor or classmates, their tips helped me see problems in a new way and find solutions faster. I noticed that taking breaks and coming back to tricky problems with fresh eyes helped me solve them more easily.
Findings
I find that GSAP was slightly hard for me to use as a tool for animations, as it takes some trial and error to understand how everything works, like timelines and easing. Responsive design is harder than I expected. Switching from px to em and % took time, but it made my app look better on different screens. Breaking big problems into smaller parts made everything feel less overwhelming. By focusing on one animation or feature at a time, I was able to make steady progress. Learning to work with reusable code made my life easier. For example, reusing parts of the previous codes and tweaking it saved me time while keeping things consistent across my pages.
Comments
Post a Comment