Transitioning Gracefully: My Path to Transitions for My Portfolio

Overview

After I had decided to completely rewrite my portfolio again (i rewrite it every year since I start coding) I started re-imaging motion for new portfolio.

Being a big fan of Google Material Design, I was using a material 3 motion in my previous portfolio, like forward and backward, top level, enter and exit and some custom ones, such as a variable font scale for icons and text. All these animations were creating smooth experience.

For brand one, I used core principles of Material Design, the key objective was to keep transitions as material one, but, at the same time, to create something unique that stands out and it is associated with my website.

This key point was reaching a scale factor in my motion.

Duration

But let's start from the beginning. Starting with, I had to define my duration for transitions.

I wasn't sure in using a material motion duration because it's too long for using with a scale. The main reason was accessibility.

What that means? if duration is too long, the content will be affected by scale factor and also it will be shifted. It will create a problem with reading content. No one likes when ad banner slowly appears from bottom of the screen, yeah?

So, for duration I have chosen a range of 150-300 milliseconds.

300ms — Enter page transition, large components
200ms — Transitioning between icons
150ms — Exit page transition, small components

For example, a select menu content will be 300ms for enter and 200ms for icon transitions. (exit animation doesn't work because of UI library bug)

This example shows how some of animations can be combined:

Scale + Fade: for select menu content
Rotate: also a good effect for changing icons, "micro animations", yeah
Inversion: good effect to indicate user that element is active, applied to dropdown button itself

Easing

Another part of good animation is a proper easing. Easing can tell a lot about a designer or a developer who is behind of this animation. Easing can show feelings expressed by its creator whatever it's a site, or an app. It can tell a lot about the brand, the main idea and the future vision.

For my new portfolio page I decided to create a custom one based of material easing. I kept names for tribute of material motion, but made some changes into easing.

All the easing use cubic-bezier for defining parameters. So here is the comparison between material and my standard easing:

Cubic Bezier: Material 3 Standard

cubic-bezier(0.2, 0, 0, 1)

Creates an animation that starts slowly, keeps a constant speed through its duration, and then abruptly stops at the end.

Cubic Bezier: My Standard

cubic-bezier(0.4, 0.01, 0, 1)

Creates an animation that starts moderately slowly, with a slight acceleration, keeps a constant speed through its duration, and then abruptly stops at the end.

So my easing has slightly faster acceleration compared to the material one, creating a beautiful animation combined with proper duration.

Easing can be applied depending of state of animation. For enter animation emphasized-decelerate is used, for exit — emphasized-accelerate.

Effects

The main effect using a scale by Y axis, is applied to page transition, header menu, some of components, such as a tooltip. It also uses scale by X axis, but quite rarely. That's because scale by X means state change of component. Opacity is also applied to all animations as a main effect. Fade helps to hide elements not to distract the user from the content. A classic is also a color inversion, applied to some of the components, for example, more popover in header.

Text

Click Me 1

I'd like to mention, that the scale is applied not from 0% of container height, animation starts from 75%.

Font

I've already dealt with font animation in previous projects, implementing dynamic 'WGHT' change for Material Symbols — the latest material design icons, available as a variable font. It made possible to change font properties depending on needs. For example, icon can be more bold when user hovers or drags the button, if it has the one.

For this "generation" of my portfolio I've decided to use variable fonts everywhere, even brand Noto Sans JP to animate my Logo in Header, even using one glyph (yeah, almost).

Font weight can be seen after navigating between pages. You will see header with font becoming bolder after some delay. It aso can be seen on some of interactive components, for example, blog posts, lists of cases, even when navigating to new cases, collections. I really like how font changes a site, as if it's breathing.

Conclusion

I tried to do my best to bring some new ideas to my portfolio, completely redesigning not only the motion, but also branding, UX/UI, expanding my tech stack for more complex ideas.

Thanks for reading!