{"id":5366,"date":"2024-04-14T11:33:32","date_gmt":"2024-04-14T03:33:32","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5366"},"modified":"2024-04-14T11:37:10","modified_gmt":"2024-04-14T03:37:10","slug":"jelly-button-interaction","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/jelly-button-interaction\/","title":{"rendered":"Jelly button interaction"},"content":{"rendered":"
This tutorial will teach you how to incorporate a jelly interaction to your form button by following these steps:<\/p>\n
    \n
  1. Include a form<\/li>\n
  2. Configure your animation<\/li>\n
  3. Verify the interaction<\/li>\n<\/ol>\n

    Include a form<\/h2>\n

    Go to the Add section<\/strong>, navigate to the Form<\/strong> category, and drop a Form block<\/strong> onto the canvas.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    <\/p>\n

    Next, pick the element where the Interaction will take place. For this demo, we’ll choose the button.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Configure your animation<\/h2>\n

    Establish a trigger<\/strong><\/p>\n

    Start by selecting your button – the initial step involves setting up the trigger for the animation (which activates an animation upon interacting with an element\u2014like hovering or clicking). This can be accomplished in 3 stages:<\/p>\n

      \n
    1. Access the Interactions panel<\/strong><\/li>\n
    2. Click the addition symbol in the Element trigger<\/strong> segment<\/li>\n
    3. Choose a trigger (e.g. Mouse click)<\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      Select a pre-built animation<\/strong><\/p>\n

      You can now choose from pre-made options that apply animation to your button when someone triggers the element.<\/p>\n

      To accomplish this:\u00a0<\/p>\n

        \n
      1. Click the Choose an action<\/strong> dropdown menu<\/li>\n
      2. Pick any pre-built animation of your choice (e.g. Jello)<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        Verify the interaction<\/h2>\n

        Test the interaction on your live site. Tap the Publish<\/strong> button, choose the domain for publishing, and then click Publish to selected domains<\/strong>.<\/p>\n

        \n
        <\/div>\n<\/figure>\n

        <\/p>\n

        Whenever a user clicks the button to submit the form – they will witness your jelly button in action.<\/p>\n

        <\/p>\n

        \n
        <\/div>\n<\/figure>\n

        \u200d<\/p>\n

        But that\u2019s an outline of pre-designed animations using Jelly in the Webflow Designer.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Bring any element in your project to life using pre-built animations.","protected":false},"author":2,"featured_media":5304,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-5366","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5366"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5366\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5188"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}