Component
Skeuomorphic Audio Player Animation in Framer
About the resource
I created the skeuomorphic player by adding box shadows to the player elements and placed the audio waves component inside.
The audio waves component has two variants: default and stop. It combines grey and white lines—the white lines are positioned absolutely so it’s overlaid on top of the grey ones, and masked with a wrapping frame set to overflow. Everything is wrapped in a main mask that changes width in the stop variant. Instead of animating the white lines directly, I resize the parent frame to create the movement of the playhead. Just remember to keep the overflow hidden.
The animation cycles between two states: it transitions from default to stop using appear interactions, then returns to default with a linear transition after a 10-second delay.
About the resource
I created the skeuomorphic player by adding box shadows to the player elements and placed the audio waves component inside.
The audio waves component has two variants: default and stop. It combines grey and white lines—the white lines are positioned absolutely so it’s overlaid on top of the grey ones, and masked with a wrapping frame set to overflow. Everything is wrapped in a main mask that changes width in the stop variant. Instead of animating the white lines directly, I resize the parent frame to create the movement of the playhead. Just remember to keep the overflow hidden.
The animation cycles between two states: it transitions from default to stop using appear interactions, then returns to default with a linear transition after a 10-second delay.
About the resource
I created the skeuomorphic player by adding box shadows to the player elements and placed the audio waves component inside.
The audio waves component has two variants: default and stop. It combines grey and white lines—the white lines are positioned absolutely so it’s overlaid on top of the grey ones, and masked with a wrapping frame set to overflow. Everything is wrapped in a main mask that changes width in the stop variant. Instead of animating the white lines directly, I resize the parent frame to create the movement of the playhead. Just remember to keep the overflow hidden.
The animation cycles between two states: it transitions from default to stop using appear interactions, then returns to default with a linear transition after a 10-second delay.
The two variants (start and stop) of audio waves component in Framer.
The two variants (start and stop) of audio waves component in Framer.
The two variants (start and stop) of audio waves component in Framer.
