{"id":157548,"date":"2025-12-22T15:12:45","date_gmt":"2025-12-22T13:12:45","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=157548"},"modified":"2026-03-30T15:02:53","modified_gmt":"2026-03-30T12:02:53","slug":"interactions","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/interactions\/","title":{"rendered":"Interactions"},"content":{"rendered":"\n<p>The Interactions tab is home to Javascript functions that affect widgets. These include entrance and scrolling animations.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Create an interaction\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/-HnroCaAXUc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>See <a href=\"#options\">Options<\/a> below for a full list of Interaction options.<\/p>\n\n\n\n<p>[callout type=&#8221;note&#8221;]Interactions apply to all devices, you cannot customize interactions for different screen sizes.[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example of an interaction<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add an Image element to the canvas.<\/li>\n\n\n\n<li>Click the <strong>Interactions<\/strong> tab.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"269\" class=\"wp-image-157550\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions.png 1434w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions-300x119.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions-1024x406.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/1-Click-interactions-768x304.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>If this is the first interaction for this element, click <strong>Create an interaction<\/strong>, if this is not your first interaction, click the plus icon.<br><img decoding=\"async\" width=\"380\" height=\"364\" class=\"wp-image-157557\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/2-click-create-an-interaction.png\" alt=\"Click Create an interaction or the plus sign\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/2-click-create-an-interaction.png 610w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/2-click-create-an-interaction-300x287.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>We\u2019ll leave the Trigger on <strong>Page Load<\/strong>.<br><img decoding=\"async\" width=\"580\" height=\"368\" class=\"wp-image-157564\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/3-leave-Trigger.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/3-leave-Trigger.png 907w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/3-leave-Trigger-300x190.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/3-leave-Trigger-768x487.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><br>This means the interaction will take place when the visitors opens the page.<\/li>\n\n\n\n<li>Use the <strong>Effect<\/strong> dropdown menu to select <strong>Slide<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"365\" class=\"wp-image-157571\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/4-select-slide.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/4-select-slide.png 911w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/4-select-slide-300x189.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/4-select-slide-768x484.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>We\u2019ll leave the <strong>Type<\/strong> as <strong>In<\/strong> as we want the image to enter the screen.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"366\" class=\"wp-image-157578\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/5-Leave-as-In.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/5-Leave-as-In.png 914w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/5-Leave-as-In-300x189.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/5-Leave-as-In-768x485.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>In the <strong>Direction<\/strong> field, click the down arrow so the image enters from top of the page.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"366\" class=\"wp-image-157585\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/6-leave-Direction.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/6-leave-Direction.png 914w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/6-leave-Direction-300x189.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/6-leave-Direction-768x485.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>In the <strong>Duration<\/strong> field, enter <strong>1500 MS<\/strong> so the image enters slowly.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"495\" class=\"wp-image-157592\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/7-select-duration-1500.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/7-select-duration-1500.png 908w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/7-select-duration-1500-300x256.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/7-select-duration-1500-768x656.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Leave the <strong>Delay<\/strong> at <strong>0 MS<\/strong> as we want the effect to start as soon as the page loads.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"487\" class=\"wp-image-157599\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/8-leave-duration-as-0.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/8-leave-duration-as-0.png 911w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/8-leave-duration-as-0-300x252.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/8-leave-duration-as-0-768x645.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Save the page.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"251\" class=\"wp-image-157607\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/save-the-page.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/save-the-page.png 1440w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/save-the-page-300x111.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/save-the-page-1024x378.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/save-the-page-768x283.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Click the view icon to see how the effect looks.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"252\" class=\"wp-image-157614\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Click-the-view-eye-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Click-the-view-eye-icon.png 1435w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Click-the-view-eye-icon-300x111.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Click-the-view-eye-icon-1024x380.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Click-the-view-eye-icon-768x285.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Now we can add additional effects for truly original designs.&nbsp;<\/li>\n\n\n\n<li>In the <strong>Interactions<\/strong> tab, click the plus sign.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"321\" class=\"wp-image-157621\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/9-click-the-plus-sign.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/9-click-the-plus-sign.png 897w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/9-click-the-plus-sign-300x166.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/9-click-the-plus-sign-768x425.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Leave the <strong>Trigger<\/strong> dropdown as <strong>Page Load <\/strong>and the<strong> Effect <\/strong>as <strong>Fade<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"363\" class=\"wp-image-157628\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/10-leave-teh-Trigger-as-page-load.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/10-leave-teh-Trigger-as-page-load.png 918w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/10-leave-teh-Trigger-as-page-load-300x188.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/10-leave-teh-Trigger-as-page-load-768x481.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Enter a <strong>Duration<\/strong> of <strong>1500 MS<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"490\" class=\"wp-image-157635\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/11-change-duration-to-1500.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/11-change-duration-to-1500.png 905w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/11-change-duration-to-1500-300x254.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/11-change-duration-to-1500-768x649.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Select a <strong>Delay<\/strong> of <strong>300 MS<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"482\" class=\"wp-image-157642\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/12-set-delay-to-300.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/12-set-delay-to-300.png 922w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/12-set-delay-to-300-300x250.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/12-set-delay-to-300-768x639.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><br>The image will enter from the top of the page and the image will slowly appear on the page.<br>[callout tip=&#8221;tip&#8221;]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<h2 class=\"wp-block-heading\">Interaction options<\/h2>\n\n\n\n<p id=\"options\"><strong>Interaction<\/strong><\/p>\n\n\n\n<p>Add and edit interactions.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the plus (+) sign to add an interaction.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"179\" class=\"wp-image-157650\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interactions-click-the-plus-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interactions-click-the-plus-icon.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interactions-click-the-plus-icon-300x192.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>After you add an interaction:\n<ul class=\"wp-block-list\">\n<li>Click the play symbol to see how the interaction appears.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"179\" class=\"wp-image-157657\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Interaction-click-the-play-button.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Interaction-click-the-play-button.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/Interaction-click-the-play-button-300x192.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Click the x to delete the interaction.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"179\" class=\"wp-image-157664\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interaction-click-the-x.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interaction-click-the-x.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/12\/interaction-click-the-x-300x192.png 300w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Trigger<\/strong><\/p>\n\n\n\n<p>Use the Trigger dropdown menu to select:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Page load<\/strong>: The interaction begins when the visitor opens the page.<\/li>\n\n\n\n<li><strong>Scroll into view<\/strong>: The interaction begins when the visitor reaches this area of the page.<\/li>\n\n\n\n<li><strong>While scrolling<\/strong>: The interaction takes place as the visitor goes up or down the page.<\/li>\n\n\n\n<li><strong>On hover<\/strong>: The interaction takes place when the visitor mouses over the element.<\/li>\n\n\n\n<li><strong>On click<\/strong>: The interaction takes place when the visitor clicks on the element.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"408\" class=\"wp-image-166280\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Triggers.png\" alt=\"A list of triggers to start an animation\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Triggers.png 474w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Triggers-206x300.png 206w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n\n\n\n<p><strong>Effect<\/strong><\/p>\n\n\n\n<p>Use the dropdown to select a type of interaction:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fade<\/strong>: Have the element appear or disappear.<\/li>\n\n\n\n<li><strong>Slide<\/strong>: Have the element enter or exit the page from one of the sides.<\/li>\n\n\n\n<li><strong>Scale<\/strong>: Have the element become larger or smaller.<\/li>\n\n\n\n<li><strong>Custom<\/strong>: The custom option opens a second menu that lets you set start and end settings for the following characteristics. This gives you finer control over the element&#8217;s animation.\n<ul class=\"wp-block-list\">\n<li><strong>Opacity<\/strong>: The beginning and end transparency of the element.<\/li>\n\n\n\n<li><strong>Scale<\/strong>: The beginning and end size of the element.<\/li>\n\n\n\n<li><strong>Move<\/strong>: The beginning and end position of the element using X,Y and Z axes.<\/li>\n\n\n\n<li><strong>Rotate<\/strong>: How the element will rotate along the X, Y and Z axes.<\/li>\n\n\n\n<li><strong>Skew<\/strong>: Define the element&#8217;s distortion along X and `y axes. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"399\" class=\"wp-image-166287\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Effect.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Effect.png 482w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Effect-211x300.png 211w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Type<\/strong><\/p>\n\n\n\n<p>Select either:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>In<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Fade<\/strong>: The element appears.<\/li>\n\n\n\n<li><strong>Slide<\/strong>: The element enters the page.<\/li>\n\n\n\n<li><strong>Scale<\/strong>: The element grows.&nbsp;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Out<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Fade<\/strong>: The element disappears.<\/li>\n\n\n\n<li><strong>Slide<\/strong>: The element exits the page.<\/li>\n\n\n\n<li><strong>Scale<\/strong>: The element shrinks.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"403\" class=\"wp-image-166295\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/in-or-out.png\" alt=\"Select either In or Out\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/in-or-out.png 478w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/in-or-out-208x300.png 208w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Direction<\/strong><\/p>\n\n\n\n<p>Click either the up, down, right or left arrow to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fade<\/strong>: Add an effect where the element moves in the arrow&#8217;s direction as it fades.&nbsp;<\/li>\n\n\n\n<li><strong>Slide<\/strong>: Use an arrow to set the direction the element will move when it&#8217;s sliding. an effect where the element moves in the arrow&#8217;s direction as it fades.&nbsp;<\/li>\n\n\n\n<li><strong>Scale<\/strong>: Add an effect where the element moves in the arrow&#8217;s direction as it fades.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"400\" class=\"wp-image-166302\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Direction.png\" alt=\"Select the direction\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Direction.png 476w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Direction-210x300.png 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br><\/li>\n<\/ul>\n\n\n\n<p><strong>Duration<\/strong><\/p>\n\n\n\n<p>Measures, in milliseconds (MS) how long it will take for the interaction to complete.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"400\" class=\"wp-image-166309\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Duration.png\" alt=\"Enter a duration\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Duration.png 476w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Duration-210x300.png 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/p>\n\n\n\n<p><strong>Delay<\/strong><\/p>\n\n\n\n<p>Sets, in milliseconds (MS), an amount of time that will pass between the trigger and the beginning of the interaction.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"400\" class=\"wp-image-166316\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Delay.png\" alt=\"Set a delay for the animation.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Delay.png 476w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Delay-210x300.png 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br><\/p>\n\n\n\n<p><strong>Easing<\/strong><\/p>\n\n\n\n<p><strong>Sets<\/strong> the <strong>rate of change<\/strong> of the animation over time:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ease in<\/strong>: Starts slow and speeds up at the end.<\/li>\n\n\n\n<li><strong>Ease In Out<\/strong>: Starts slow, speeds up and then ends slowly.<\/li>\n\n\n\n<li><strong>Ease Out<\/strong>: Starts fast and slows down at the end.<\/li>\n\n\n\n<li><strong>Back in<\/strong>: Moves slightly backward (past its starting point) before accelerating toward its target.<\/li>\n\n\n\n<li><strong>Back In Out<\/strong>: Moves slightly backward (past its starting point) before accelerating toward its target which is passes before moving back.<\/li>\n\n\n\n<li><strong>Back out<\/strong>: Goes to its destination, slightly <em>passes<\/em> it, and then &#8220;springs&#8221; back to the correct final position.<\/li>\n\n\n\n<li><strong>Linear<\/strong>: Constantly change from beginning to end.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"574\" class=\"wp-image-166323\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Easing.png\" alt=\"Select an easing setting\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Easing.png 480w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/Easing-146x300.png 146w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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=&#8221;note&#8221;]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 [&hellip;]<\/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":[1505],"tags":[],"class_list":["post-157548","post","type-post","status-publish","format-standard","hentry","category-elements"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interactions | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Interactions in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; 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&#039;s Knowledge Base. Get Elementor tips &amp; 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=\"article:modified_time\" content=\"2026-03-30T12:02:53+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=\"9 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\",\"dateModified\":\"2026-03-30T12:02:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/interactions\/\"},\"wordCount\":769,\"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\":[\"Elements\"],\"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\",\"dateModified\":\"2026-03-30T12:02:53+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\":\"Editor V4\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elements\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/elements\/\"},{\"@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:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"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","article_modified_time":"2026-03-30T12:02:53+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":"9 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","dateModified":"2026-03-30T12:02:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/interactions\/"},"wordCount":769,"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":["Elements"],"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","dateModified":"2026-03-30T12:02:53+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":"Editor V4","item":"https:\/\/elementor.com\/help\/v4-editor\/"},{"@type":"ListItem","position":3,"name":"Elements","item":"https:\/\/elementor.com\/help\/v4-editor\/elements\/"},{"@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:\/\/elementor.com\/help\/#\/schema\/person\/image\/","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":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/157548\/revisions"}],"predecessor-version":[{"id":166549,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/157548\/revisions\/166549"}],"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}]}}