Application Design 2 - Final Task
Week 12 - 14
Justin Averill Prasetya / 0355048
App Design 2 / BDCM / The Design
School
Final Task
INSTRUCTIONS
App Animation
Start-Up Animation
I used After Effects for the animation then compressed and covert it into
LottieFlies code so I could implement it into the app the concept was to
make it appear out of nowhere.
Fig 1.1.1
Fig 1.1.2
Fig 1.1.3
Here's the implementation of it, I classify them into 2 classes
foreground and background which have different z indexes so they can
overlap each other, for the modifier, I also set an animation, after the
start-up screen ends or the duration that i set up ends, the home screen
will slide up with the help of gsap from and to, so we could determine
before and after value.
Fig 1.1.5
HomeScreen Animation
For the home screen, there's not much animation considering we're making an
app for phones all i did was set up the layout and for the page transition
we probably took the reference from the start-up to the home page
transition, it's gonna be the same fundamental.
What I do is I made a transition for the Sidebar, by using gsap from to I
could make it slide right in and by looking at the tutorial i found a way to
attempt making it. also, i added a event listener for the button so it
functioned as a close button
Fig 1.1.6
Fig 1.1.7
Switching Animation
I wanted to make a switching animation for the booking page so that the
user could switch up the departure place and destination, using is else
variable that i found on stack overflow I managed to adjust it to my own
preference
Fig 1.1.8
Fig 1.1.9
I've implemented it and i change the button onto a symbol so it blends in with the concept
Fig 1.1.10
Next one i implemented a gsap from when entering pages so it became more seamless, i set it on load so it appears after the page is loaded.
Fig 1.2.1
for the rest, i just do the normal css adjustment to make the layout
Fig 1.2.2
Fig 1.2.3 (responsive part)
But I've also implemented a carousel to show the promotion. The code manages a slider that automatically transitions between slides every 2200 milliseconds. It adjusts the slider's width to fit all items, moves to the previous or next slide on button clicks, and wraps around when reaching the start or end.
Fig 1.2.4
Fig 1.2.5
I just do the layout for the remaining 5 pages and try to implement the effect for the rest of it.
Presentation Video
Comments
Post a Comment