{"id":157548,"date":"2025-12-22T15:12:45","date_gmt":"2025-12-22T13:12:45","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=157548"},"modified":"2025-12-14T16:07:28","modified_gmt":"2025-12-14T14:07:28","slug":"interactions","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/interactions\/","title":{"rendered":"Interactions"},"content":{"rendered":"\n

The Interactions tab is home to Javascript functions that affect widgets. These include entrance and scrolling animations.<\/p>\n\n\n\n

See Options<\/a> below for a full list of Interaction options.<\/p>\n\n\n\n

[callout type=”note”]Interactions apply to all devices, you cannot customize interactions for different screen sizes.[\/callout]<\/p>\n\n\n\n

Example of an interaction<\/h2>\n\n\n\n
    \n
  1. Add an Image element to the canvas.<\/li>\n\n\n\n
  2. Click the Interactions<\/strong> tab.
    \"\"<\/li>\n\n\n\n
  3. If this is the first interaction for this element, click Create an interaction<\/strong>, if this is not your first interaction, click the plus icon.
    \"\"<\/li>\n\n\n\n
  4. We\u2019ll leave the Trigger on Page Load<\/strong>.
    \"\"
    This means the interaction will take place when the visitors opens the page.<\/li>\n\n\n\n
  5. Use the Effect<\/strong> dropdown menu to select Slide<\/strong>.
    \"\"<\/li>\n\n\n\n
  6. We\u2019ll leave the Type<\/strong> as In<\/strong> as we want the image to enter the screen.
    \"\"<\/li>\n\n\n\n
  7. In the Direction<\/strong> field, click the down arrow so the image enters from top of the page.
    \"\"<\/li>\n\n\n\n
  8. In the Duration<\/strong> field, use the dropdown menu to select 1500 MS<\/strong> so the image enters slowly. 
    \"\"<\/li>\n\n\n\n
  9. Leave the Delay<\/strong> at 0 MS<\/strong> as we want the effect to start as soon as the page loads.
    \"\"<\/li>\n\n\n\n
  10. Save the page.
    \"\"<\/li>\n\n\n\n
  11. Click the view icon to see how the effect looks.
    \"\"
    Now we can add additional effects for truly original designs. <\/li>\n\n\n\n
  12. In the Interactions<\/strong> tab, click the plus sign. 
    \"\"<\/li>\n\n\n\n
  13. Leave the Trigger<\/strong> dropdown as Page Load <\/strong>and the Effect <\/strong>as Fade<\/strong>.
    \"\"<\/li>\n\n\n\n
  14. Select a Duration<\/strong> of 1500 MS<\/strong>.
    \"\"<\/li>\n\n\n\n
  15. Select a Delay<\/strong> of 300 MS<\/strong>.
    \"\"
    The image will enter from the top of the page and the image will slowly appear on the page.
    [callout tip=”tip”]You can use two interactions to have an element enter from the top and the side so it comes in at an angle.[\/callout]<\/li>\n<\/ol>\n\n\n\n

    Interaction options<\/h2>\n\n\n\n

    Interaction<\/strong><\/p>\n\n\n\n

    Add and edit interactions.
    <\/p>\n\n\n\n

      \n
    • Click the plus (+) sign to add an interaction.
      \"\"<\/li>\n\n\n\n
    • After you add an interaction:\n
        \n
      • Click the play symbol to see how the interaction appears.
        \"\"<\/li>\n\n\n\n
      • Click the x to delete the interaction.
        \"\"<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

        Trigger<\/strong><\/p>\n\n\n\n

        Use the Trigger dropdown menu to select:
        <\/p>\n\n\n\n

          \n
        • Page load<\/strong>: The interaction begins when the visitor opens the page.<\/li>\n\n\n\n
        • Scroll into view<\/strong>: The interaction begins when the visitor reaches this area of the page.
          \"\"<\/li>\n<\/ul>\n\n\n\n

          Effect<\/strong><\/p>\n\n\n\n

          Use the dropdown to select a type of interaction:
          <\/p>\n\n\n\n

            \n
          • Fade<\/strong>: Have the element appear or disappear.<\/li>\n\n\n\n
          • Slide<\/strong>: Have the element enter or exit the page from one of the sides.<\/li>\n\n\n\n
          • Scale<\/strong>: Have the element become larger or smaller.
            \"\"<\/li>\n<\/ul>\n\n\n\n

            Type<\/strong><\/p>\n\n\n\n

            Select either:<\/p>\n\n\n\n

              \n
            • In<\/strong>\n
                \n
              • Fade<\/strong>: The element appears.<\/li>\n\n\n\n
              • Slide<\/strong>: The element enters the page.<\/li>\n\n\n\n
              • Scale<\/strong>: The element grows. <\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Out<\/strong>\n
                  \n
                • Fade<\/strong>: The element disappears.<\/li>\n\n\n\n
                • Slide<\/strong>: The element exits the page.<\/li>\n\n\n\n
                • Scale<\/strong>: The element shrinks.
                  \"\"<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                  Direction<\/strong><\/p>\n\n\n\n

                  Click either the up, down, right or left arrow to:<\/p>\n\n\n\n

                    \n
                  • Fade<\/strong>: Add an effect where the element moves in the arrow’s direction as it fades. <\/li>\n\n\n\n
                  • Slide<\/strong>: Use an arrow to set the direction the element will move when it’s sliding. an effect where the element moves in the arrow’s direction as it fades. <\/li>\n\n\n\n
                  • Scale<\/strong>: Add an effect where the element moves in the arrow’s direction as it fades. 
                    \"\"
                    <\/li>\n<\/ul>\n\n\n\n

                    Duration<\/strong><\/p>\n\n\n\n

                    Measures, in milliseconds (MS) how long it will take for the interaction to complete. 
                    \"\"<\/p>\n\n\n\n

                    Delay<\/strong><\/p>\n\n\n\n

                    Sets, in milliseconds (MS), an amount of time that will pass between the trigger and the beginning of the interaction. 
                    \"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

                    The Interactions tab is home to Javascript functions that affect widgets. These include entrance and scrolling animations. See Options below for a full list of Interaction options. [callout type=”note”]Interactions apply to all devices, you cannot customize interactions for different screen sizes.[\/callout] Example of an interaction Interaction options Interaction Add and edit interactions. Trigger Use the […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1506],"tags":[],"class_list":["post-157548","post","type-post","status-publish","format-standard","hentry","category-v4-editor"],"acf":[],"yoast_head":"\nInteractions | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/interactions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactions | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/interactions\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-22T13:12:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1434\" \/>\n\t<meta property=\"og:image:height\" content=\"568\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Interactions\",\"datePublished\":\"2025-12-22T13:12:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/\"},\"wordCount\":540,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/1-Click-interactions.png\",\"articleSection\":[\"Editor V4\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/\",\"name\":\"Interactions | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/1-Click-interactions.png\",\"datePublished\":\"2025-12-22T13:12:45+00:00\",\"description\":\"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/1-Click-interactions.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/1-Click-interactions.png\",\"width\":1434,\"height\":568},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/interactions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Editor V4\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/v4-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Interactions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interactions | Elementor","description":"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/interactions\/","og_locale":"en_US","og_type":"article","og_title":"Interactions | Elementor","og_description":"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/interactions\/","og_site_name":"Help","article_published_time":"2025-12-22T13:12:45+00:00","og_image":[{"width":1434,"height":568,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/interactions\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/interactions\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Interactions","datePublished":"2025-12-22T13:12:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/interactions\/"},"wordCount":540,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/interactions\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png","articleSection":["Editor V4"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/interactions\/","url":"https:\/\/elementor.com\/help\/interactions\/","name":"Interactions | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/interactions\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/interactions\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png","datePublished":"2025-12-22T13:12:45+00:00","description":"Learn everything about Interactions in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/interactions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/interactions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/interactions\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png","width":1434,"height":568},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/interactions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/v4-editor\/"},{"@type":"ListItem","position":4,"name":"Interactions"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/157548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=157548"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/157548\/revisions"}],"predecessor-version":[{"id":165522,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/157548\/revisions\/165522"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=157548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=157548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=157548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}