Cool Effects & Animations for Inputs - New Plugin from Zeroqode

levon · October 23, 2018, 8:15am

We have just published a new plugin - Cool Effects & Animations for Inputs

Make the interaction with your users more engaging by adding awesome effects and animations to the Bubble inputs. This plugin triggers an animation on selected inputs whenever the input focus starts or ends (The animation color can be customized)

For details, screenshots and demos please visit https://zeroqode.com/plugin/cool-animation-effects-for-inputs-1532952599516x668713368491393000

Levon Terteryan
Founder @ Zeroqode

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-Code Development Services

steven.junio91 · August 3, 2018, 7:51pm

Looks good. Thanks!

levon · October 3, 2018, 9:40am

Better with a gif

nowfinanceoz · February 13, 2019, 3:45am

Hi - I purchased this plugin for a form I am building. I am happy with the effects but have a question around validations - if the user inputs an invalid input, how do i show a read box / alert to get them to correct the error in real time (the plugin seems to overwrite the bubble.is functionality to do the same). Basically m looking to recreate this functionality -

https://members.ratesetter.com.au/app/Application/RateEstimate?brokerId=cb8e3a82-c3d9-44f2-9542-f1b510479ae1&ib=false&p=eyJyc2Zvcm1fTG9hbkFtb3VudFRlcm1fQW1vdW50IjoiMTAwMDAiLCJyc2Zvcm1fTG9hbkFtb3VudFRlcm1fVGVybUluTW9udGhzIjoiMTIiLCJyc3JlZmVyX3BsYXRmb3JtIjoicmV0YWlsIn0%3D

levon · February 13, 2019, 4:23am

You can simply use conditional formatting on inputs to change the look of the input (like you would regularly do in Bubble) and use workflows with conditions (like when input’s value is … then show an alert etc.)

nowfinanceoz · February 14, 2019, 12:56am

Hi Levon
Thanks for the suggestion on conditional formatting. My point was that the plugin seems to block the conditional formatting inbuilt on the inputs from working. So creating workflows would be the only work around (that would be pretty cumbersome for all the inputs)?

levon · February 14, 2019, 1:08am

do you mean the behavior when Bubble highlights the inputs which are empty or not valid? Yes, i’m afraid it cannot be otherwise and using workflows it the only work around here.

nowfinanceoz · February 14, 2019, 2:34am

Hi LEvon - thanks for the work around. Bit cumbersome, but doable - any way to work across multiple inputs without creating multiple workflows?

Another issue is that the label text is TImes New Roman and cant seem to change it to open sans or anything else?

levon · February 14, 2019, 4:46am

by using conditions on the action levels, you can use one or a few workflows that would deal with many inputs.

i’m afraid right now it’s not possible

nowfinanceoz · February 15, 2019, 12:37am

Hi Levon - Would greatly appreciate if you could give me an example of this / point me to the right forum post or app example? (have been searching but couldnt quite get it)

korolov59 · April 20, 2020, 5:52am

Hi. Could you pls help with this issue. Plugin is great but when page loaded and input shows initial content it goes like this. how to change it? It’s upper effect. Снимок экрана 2020-04-20 в 09.11.33

vladlarin · April 20, 2020, 11:57am

hi Dmitry!

Asking our team to check this one out
Cheers!

korolov59 · April 21, 2020, 7:03pm

thanks))

ZeroqodeSupport · April 22, 2020, 3:35pm

Hello, @korolov59. Thanks for reaching out and apologies for the delay.

The reason why this is happening is in the settings you add to the Input element.

For example, if you indicate the text in Placeholder, it will be shown as the background or as the animated text, and will disappear from the input field when you add the actual input:
Placeholder - video

If you indicate the text in Initial content field, instead of the Placeholder, you will have as a result a text element in your input field which will be always displayed in it (after page refreshes and so on):
Initial element - video

But if you indicate the Placeholder and the Initial content at the same time - you will get the same effect you are asking about:
2 features overlapping each other - video

This issue is observed with the animated Placeholders, the obliged condition - the Initial content should be indicated.

Hope this info was helpful.
Regards,
Zeroqode Team

korolov59 · April 22, 2020, 8:03pm

Thank you guys for your answer. But still I didn’t get it.
I need placeholder to be on top by default in case initial content is running like in the pic 1 Снимок экрана 2020-04-22 в 23.24.10 .
Right now initial content and placeholder are visible in the the same time like in the pic 2 and this is not cool. When I focus the input it goes like in the pic 1. But I need placeholder to be on top when page is loaded if initial content exists. Is it possible to do it?

ZeroqodeSupport · April 23, 2020, 1:20pm

@korolov59,

With the current Effect you have chosen (according to your screenshots, it is Upper) - no, it is not possible.
The idea of this effect is to move the Placeholder to the top when the input field is on focus. But it does not have a condition, to freeze the Placeholder on the “endpoint” position, when the Initial content is indicated.

As a walkaround, you can test all available effects and choose the most suitable for your current needs.
Also, if you need to display a static text on the top of your input field (as a default) - you can try just to create a simple text element and place it above the input field.

Thank you for understanding and please receive our apologies if some functionality of our plugin is mismatching with your needs

Regards,
Zeroqode Team

korolov59 · April 23, 2020, 2:36pm

it’s sad. The effect is really cool. Thanks for your attention to the issue anyway

sonnentag.matthias · November 11, 2020, 1:10pm

Hi,

i have an invisible floating group on my page which shows when you click a button. In this fg there are several input fields with the effect 16. Now when you close the fg (hide fg) I implemented a workflow to reset data in the fg. If you now click the button again to show the fg the input elements are not reseted as normal. See in screenshot how the elements look after the second click. Is there a way to turn the inputs back to normal?
Bildschirmfoto 2020-11-11 um 14.08.55
Regards
Matthias

ZeroqodeSupport · November 12, 2020, 10:32am

Hi, @sonnentag.matthias!

Thanks for reaching out!

I have replicated your steps and all data has been reset correctly. Here are the steps.

Click the Show fg button
The fg has appeared, Then fill the inputs in

Click on “X” icon and the fg has been hidden.

Click on Show fg button again and the fg has appeared with clear inputs

Just in case here are the screenshots of the workflow

Could you please check your workflow and give it another try.

Best,
Zeroqode Team

melon · November 12, 2020, 11:54am

@levon - It would be better, if you can include the pricing + some screenshot of plugin with your “Every” new plugin post as it will be more easy to make a deal.