Advanced Topics in Interactivity

04 — 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 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 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. 


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.


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

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.