New
New
New
Component
Exploding Input Component in Framer
This component let’s you shoot cute little elements out of your input fields as you’re typing. It was recreated in Framer from an interaction created by Lochie for the old Honk (now sunset) website. Feel free to copy the component to your own site, tweak the properties, and most importantly, have a ton of fun!
Created by
About the resource
So the question is, how do you add this effect to one of your input fields, right? Let me show you.
All you need to do is use the built in form builder in Framer, and paste the exploding input component into one of the Label frames.
Pay attention that all of your inputs have a separate label frame, so if you want to add this effect to all text fields, you need to add the component in each ‘Label’ frame.
About the resource
So the question is, how do you add this effect to one of your input fields, right? Let me show you.
All you need to do is use the built in form builder in Framer, and paste the exploding input component into one of the Label frames.
Pay attention that all of your inputs have a separate label frame, so if you want to add this effect to all text fields, you need to add the component in each ‘Label’ frame.
About the resource
So the question is, how do you add this effect to one of your input fields, right? Let me show you.
All you need to do is use the built in form builder in Framer, and paste the exploding input component into one of the Label frames.
Pay attention that all of your inputs have a separate label frame, so if you want to add this effect to all text fields, you need to add the component in each ‘Label’ frame.
The exploding input component on the left layers panel in Framer.
The exploding input component on the left layers panel in Framer.
The exploding input component on the left layers panel in Framer.
As you can see it on the image above, the component is nicely sitting within the label frame. Once inside, you can set this component to absolute position, and it will be a simple invisible component that just gives this effect to the input.
Important: In order to see the little elements exploding out of the input, you need to set the ‘Label’ and most other parent frames to visible overflow. Otherwise the elements will be hidden as they’re getting clipped.
The component is fully customizable on the right panel. You can use it in two main modes: Components, and Images. So you either connect components and elements to the component that will be used in the explosion or upload images directly on the properties panel when used in Images mode.
As you can see it on the image above, the component is nicely sitting within the label frame. Once inside, you can set this component to absolute position, and it will be a simple invisible component that just gives this effect to the input.
Important: In order to see the little elements exploding out of the input, you need to set the ‘Label’ and most other parent frames to visible overflow. Otherwise the elements will be hidden as they’re getting clipped.
The component is fully customizable on the right panel. You can use it in two main modes: Components, and Images. So you either connect components and elements to the component that will be used in the explosion or upload images directly on the properties panel when used in Images mode.
As you can see it on the image above, the component is nicely sitting within the label frame. Once inside, you can set this component to absolute position, and it will be a simple invisible component that just gives this effect to the input.
Important: In order to see the little elements exploding out of the input, you need to set the ‘Label’ and most other parent frames to visible overflow. Otherwise the elements will be hidden as they’re getting clipped.
The component is fully customizable on the right panel. You can use it in two main modes: Components, and Images. So you either connect components and elements to the component that will be used in the explosion or upload images directly on the properties panel when used in Images mode.
The properties of the exploding input component in Framer.
The properties of the exploding input component in Framer.
The properties of the exploding input component in Framer.
Feel free to play around with the properties. I found some pretty fun settings especially with gravity set to 0, that can really go crazy.
Feel free to play around with the properties. I found some pretty fun settings especially with gravity set to 0, that can really go crazy.
Feel free to play around with the properties. I found some pretty fun settings especially with gravity set to 0, that can really go crazy.
