Component
Music Player Widget Interaction in Framer
About the resource
To create this music player interaction, three components are required: the CD component, the number flow component, and the audio waves animation component. These elements were then organized into a widget stack within the main music player component, ensuring everything was structured cohesively.
About the resource
To create this music player interaction, three components are required: the CD component, the number flow component, and the audio waves animation component. These elements were then organized into a widget stack within the main music player component, ensuring everything was structured cohesively.
About the resource
To create this music player interaction, three components are required: the CD component, the number flow component, and the audio waves animation component. These elements were then organized into a widget stack within the main music player component, ensuring everything was structured cohesively.
The four variants of the CD component.
The four variants of the CD component.
The four variants of the CD component.
For the animations, I built the music player using five variants for smooth transitions. The default state, features the CD at 0 degrees rotation. From here, the playing variant is triggered using an "Appear" interaction, where the CD completes a 360-degree rotation, signifying playback.
To add depth, I introduced a stopped variant. In this state, the CD rotates back to 0 degrees with a click interaction, while the accompanying text blurs and scales down slightly, emphasizing the pause.
From the stopped state, the animation transitions into a moved down variant, where the CD morphs from a circle into a square. Clicking this state takes the animation to a secondary starting variant. Here, the CD moves back up, regains its circular form, and triggers an automatic transition into the playing variant using an "Appear" interaction.
This approach creates a seamless loop of animations, enabling smooth transitions and maintaining an engaging flow throughout the interaction.
For the animations, I built the music player using five variants for smooth transitions. The default state, features the CD at 0 degrees rotation. From here, the playing variant is triggered using an "Appear" interaction, where the CD completes a 360-degree rotation, signifying playback.
To add depth, I introduced a stopped variant. In this state, the CD rotates back to 0 degrees with a click interaction, while the accompanying text blurs and scales down slightly, emphasizing the pause.
From the stopped state, the animation transitions into a moved down variant, where the CD morphs from a circle into a square. Clicking this state takes the animation to a secondary starting variant. Here, the CD moves back up, regains its circular form, and triggers an automatic transition into the playing variant using an "Appear" interaction.
This approach creates a seamless loop of animations, enabling smooth transitions and maintaining an engaging flow throughout the interaction.
For the animations, I built the music player using five variants for smooth transitions. The default state, features the CD at 0 degrees rotation. From here, the playing variant is triggered using an "Appear" interaction, where the CD completes a 360-degree rotation, signifying playback.
To add depth, I introduced a stopped variant. In this state, the CD rotates back to 0 degrees with a click interaction, while the accompanying text blurs and scales down slightly, emphasizing the pause.
From the stopped state, the animation transitions into a moved down variant, where the CD morphs from a circle into a square. Clicking this state takes the animation to a secondary starting variant. Here, the CD moves back up, regains its circular form, and triggers an automatic transition into the playing variant using an "Appear" interaction.
This approach creates a seamless loop of animations, enabling smooth transitions and maintaining an engaging flow throughout the interaction.
The five variants of the music player component in Framer.
The five variants of the music player component in Framer.
The five variants of the music player component in Framer.
