Demo to preview the plugin:
Introduction
This cute and funny animation will bring some life into the boring signin/signup process. Our curious yeti will follow user's cursor with its eyes while typing, but will not peek when it comes to secrets.
See Key Features
Prerequisites
To use the Cute and Funny Login Animation Plugin for Bubble by Zeroqode, ensure the following:
- You must have an active Bubble account.
- The plugin should be installed from the Zeroqode Plugin Marketplace or added directly from the plugin page.
- Assign a unique ID Attribute to any element where the Cute and Funny Login Animation will be applied.
For instructions on how to set the ID Attribute in Bubble, refer to the guide below: https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”.
- Add the Animated Login Element
- Go to the Design tab in the Bubble Editor.
- Find the Animated Login element under Visual elements (after installing the plugin).
- Drag and drop it onto the page where you want the animated login form to appear.
- Configure the Element Properties
- Login input ID – Enter the ID of the email input field already placed on the page.
- Password input ID – Enter the ID of the password input field already placed on the page.
- Track all inputs – When checked, the animation will respond dynamically to user typing.
Select the Animated Login element and customize the properties in the Appearance tab:
Plugin Element Properties
Animated Login
Fields:
Title | Description | Type |
Login input ID | The id of the Login Input element. | Text (optional) |
Password input ID | The id of the Password Input element. | Text (optional) |
Track all inputs | Check this if you want Yeti to follow all inputs on the page. | Checkbox (yes/no) |
Body color | Select the body color. | Color |
Face/Palm/Ears/Chest color | Set the colors for the yeti's face, palms, ears, and chest. | Color |
Background color | Set the background color of the animation. | Color |
Tongue color | Set the tongue color of the yeti. | Color |
