Play animation experiment

Inspired by the play animation I made while reworking the audio player at Zetland.
I split a play icon into two paths and interpolated between them and a pause icon using motion and flubber.

Iteration 1: Annoyingly, when I split the Play icon into two paths, at certain levels of zoom, I got a tiny artefact / some sort of aliasing which put a tiny line between the two halves.

Iteration 2: I solved the overlap by duplicating the shape and splitting it twice so that they have a bit of overlap in the middle. IMO the interpolation looks better from the new shape. I put a round border on the button. And immediately noticed that the play icon is not visually balanced/centered. Back to figma.

Iteration 3: I shifted the play SVG over by 1px in its viewbox - and yay! that looks much better. Now just a couple timing and easing adjustments and I can plop it into the audio player that appears when you hover over my name in the header. I went with a duration of 0.28s and the "easeInOut" function.

Inspired by the play animation I made while reworking the audio player at Zetland.
I split a play icon into two paths and interpolated between them and a pause icon using motion and flubber.

Iteration 1: Annoyingly, when I split the Play icon into two paths, at certain levels of zoom, I got a tiny artefact / some sort of aliasing which put a tiny line between the two halves.

Play animation experiment

Inspired by the play animation I made while reworking the audio player at Zetland.
I split a play icon into two paths and interpolated between them and a pause icon using motion and flubber.

Iteration 1: Annoyingly, when I split the Play icon into two paths, at certain levels of zoom, I got a tiny artefact / some sort of aliasing which put a tiny line between the two halves.