MARKETPLACE
PLUGINS
EXPANDING ANIMATION FOR INPUTS
Expanding Animation for Inputs logo

Expanding Animation for Inputs

Published February 2020
   β€’    Updated this week

Plugin details

πŸ”Ž  An easy way to make your inputs and searchboxes expand upon focus, adding a modern animation interaction to the element!
πŸ”—  Example in run-mode (with link to editor):
https://docs.techblocksco.com?tab=Expanding-Inputs

πŸ“†  We pride ourselves in providing excellent support - if you reach out, we respond within one business day!  

*Subscriptions are pro-rated so giving it a try is low-risk β€” subscribing to the plugin for a few days will cost you a matter of pennies


Key features of this plugin:
1 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


Other popular plugins from Techblocks:

  • πŸ“Š Premium Charts Bundle - Chart JS
  • ▢️ Video Player Bundle
  • πŸ“„ PDF Generator
  • 🎨 FabricJS: Drawing & Painting Canvas
  • βœ… Toggles - Beautiful and Custom
  • $45

    One time  β€’  Or  $4/mo

    stars   β€’   0 ratings
    9.9K installs
    This plugin does not collect or track your personal data.

    Platform

    Web

    Contributor details

    TechBlocks logo
    TechBlocks
    Joined 2017   β€’   22 Plugins
    View contributor profile

    Instructions

    πŸ”—  We highly encourage you to take a look at the editor page for the demo, where you can see how the funnel charts were built. The links are here: https://docs.techblocksco.com?tab=Expanding-Inputs
    If you have any questions, don't hesitate to reach out to our team via the support URL or [email protected] (Support URL: https://forum.bubble.io/t/new-plugin-expanding-inputs-searchbox/80496).


    Main Instructions:

    1. Apply an HTML ID attribute to your input/searchbox element
    2. Add this plugin's element, called "Expandable Input/Search" anywhere on your page (it is invisible in run-mode)
    3. In the element's setting, paste the HTML ID attribute you created in step 1 in the HTML id field
    4. Specify the horizontal direction of expansion
    5. Specify the horizontal focused width
    6. Specify the vertical direction of expansion
    7. Specify the vertical focused width
    8. Specify the length of the animation in seconds

    Types

    This plugin can be found under the following types:
    Element   β€’   Action

    Categories

    This plugin can be found under the following categories:
    Containers   β€’   Media   β€’   Technical   β€’   Visual Elements

    Resources

    Support contact
    Tutorial
    Forum

    Rating and reviews

    No reviews yet

    This plugin has not received any reviews.
    Bubble