Advanced Topics in Interactivity

WEEK ⟶   01   02   03   04   05   06   07   08   09   10   11   12   13

WEEK 07 / OCTOBER 29, 2019

4.1 — Animations

Animations

I created my animations by importing pages from my Figma file onto Principle. Beginning the animations was definitely a challenging process because I had no experience prior to it, however, I learned a lot along the way.

Dashboard Animation #1 — Tapping Into A Reported Issue

For this animation, I merged similar elements together in between the two pages, such as the red button. I also animated the light gray and blue cards on the dashboard so that they can be transitioned into the symptoms and tips. The text was transitioned by playing around with the y axis positioning and its opacity, and then added a bit of a spring for the animation.

dashboard_criticalissue

Dashboard Animation #2 — Details on Your Vehicle 

This animation involves the light gray card on the dashboard transition into the wireframe card on the vehicle page. I animated this page so that the wireframe of the car "drives in" from the bottom of the screen, and then the text slides in immiditately after. 

dashboard_car

Dashboard Animation #3 — Tapping into the Engine Health Diagnostics

This was definitely the most challenging animation for me, and it involved a lot of revisions. This animation was difficult because there are no similar elements between the dashboard and Engine Health Diagnostics page. The text colours are different, and the blue card isn't displayed on the second page. Through trial and error I inititally had it so the blue card expands to the full page and lowers in opacity, however, it wasn't as smooth of a transition as I would like it to be. I then decided to transition the blue card into the light gray one in the graph, which made a much smoother transition. I also played around with the bar on the bottom so that the gasoline level and wiper fluid level could gradually increase/decrease when going back and forth from the pages. 

dashboard_EHD_new

Connecting Device Screen

I animated three screens together and used a mix of the drivers and animation function on Principle.
This animation involves the large loading pulse in the middle, as well as a loading wheel beside the "Completing Connection" section.

NEW CONNECTING TO DEVICE

Horizontal Scroll Transition

With the use of the driver feature on Principle, I animated the horizontal scroll so that the cards are fully revealed through a scroll. For this animation, I played with the scale and opacity of various elements on the artboard. 

horizontal scroll comp
Image not found

Graph Transition

This one was a bit more simple, but it got me in the hang of making sure I named my layers so that they can be animated together. By clicking through the weekly buttons, the user will see a bit of a bounce as the data changes on the bar graph.

graph

Overall, the animations were definitely very challenging to complete, however it was incredibly rewarding at the same time. I learned about the importance of having an organized layer naming structure, and how playing around with position, opacity, and scale can make a transition more smooth and interesting.