Interaction
This is a voice chat open and close animation recreated in Framer, based on Nitish Khagwal's concept. Feel free to copy the component to your project and use it on your website, or remix the project to get a peek into how something like this is built in Framer.
To create this interaction, I first laid down every single element on the design canvas that I’d need within the interaction—like the profile images, the audio waveform animation, the button, and so on.
Once everything was designed, I turned them into a single component where I could easily create an “Open” and a “Closed” variant. Then, all I had to do was connect the “Close” variant to the “Open” and set a “Click” trigger, so when “Close” is clicked, it animates to “Open”. I also connected the “Open” variant’s close button back to the “Close” variant, again with a click trigger.
To create this interaction, I first laid down every single element on the design canvas that I’d need within the interaction—like the profile images, the audio waveform animation, the button, and so on.
Once everything was designed, I turned them into a single component where I could easily create an “Open” and a “Closed” variant. Then, all I had to do was connect the “Close” variant to the “Open” and set a “Click” trigger, so when “Close” is clicked, it animates to “Open”. I also connected the “Open” variant’s close button back to the “Close” variant, again with a click trigger.
To create this interaction, I first laid down every single element on the design canvas that I’d need within the interaction—like the profile images, the audio waveform animation, the button, and so on.
Once everything was designed, I turned them into a single component where I could easily create an “Open” and a “Closed” variant. Then, all I had to do was connect the “Close” variant to the “Open” and set a “Click” trigger, so when “Close” is clicked, it animates to “Open”. I also connected the “Open” variant’s close button back to the “Close” variant, again with a click trigger.
Voice chat component variants.
Voice chat component variants.
Voice chat component variants.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
