Hey Bubblers, I just released “Expanding Inputs” — a simple plugin to make your inputs and searchboxes expand upon focus, adding a modern animation interaction to that element! Here are some examples:
1 You can apply the effect to Inputs, Multiline Inputs, and Autofill Searchboxes
2. Specify which horizontal direction you want to expand to (right to left, left to right)
3. Specify which vertical direction you want to expand in (top to bottom, bottom to top)
4. Specify the focused height and width of the input in pixels
5. Specify the duration of the animation in seconds
Example in run mode and editor mode .
Here’s the link to the Bubble plugin page.
Enjoy! And don’t hesitate to provide feedback. Cheers, Alex.
Cool!! Will save a lot for mobile view!
Hey @alex4 This is really cool! Will this work in a dropdown? I’m wondering if it’s possible to test it out before buying?
I’ll show you the use case here
i would want to focus on any 1 box and ensure that it either completely overlays or moves the other components out of the way.
Hi @jared.gibb – thanks for reaching out! The input currently won’t move other components out of the way, although that’s on my backlog. Let me know if you have any other questions!
I would love to see that. seems like moving other components is a big pain!
The overlay is hard too, i tried my hand at making a custom plugin for this based on a project i found in codepen. i was having z-index issues.
I ended up relying on a popup text input instead of an expanding input for now. expanding would be the ideal in the longrun for styling purposes. but popup for now it is!
@jared.gibb makes sense – thanks for the feedback! I will add it to my backlog for now.