Skeuomorphic Audio Player Animation in Framer

Copy component

Skeuomorphic Audio Player Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Skeuomorphic Audio Player Animation in Framer

This is a Framer recreation of Preet's skeuomorphic audio player. I didn't write any code to make this interaction. You can simply copy the component into your own project—that's how easy Framer makes it!

image of Nandi Muzsik
image of Prianca S.
image of Preet Mishra

Created by

,

and

Minimalist skeuomorphic audio player UI with waveform display
Minimalist skeuomorphic audio player UI with waveform display
Minimalist skeuomorphic audio player UI with waveform display

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.

Audio player waveform animation with start and stop transition

The two variants (start and stop) of audio waves component in Framer.

Audio player waveform animation with start and stop transition

The two variants (start and stop) of audio waves component in Framer.

Audio player waveform animation with start and stop transition

The two variants (start and stop) of audio waves component in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

  • Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component