Application Design 2 - Task 3

  

Week 7 - 11

Justin Averill Prasetya / 0355048
App Design 2 / BDCM / The Design School
Task 3

---

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.4

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

Presentation Video

https://drive.google.com/file/d/1snooRi-8aHqqZstCKq_hk2a5al6hwdmM/view?usp=share_link