{"id":345,"date":"2023-08-06T09:00:00","date_gmt":"2023-08-06T06:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=345"},"modified":"2024-01-14T14:51:01","modified_gmt":"2024-01-14T12:51:01","slug":"entrance-animations","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/entrance-animations\/","title":{"rendered":"Add entrance animations to your page"},"content":{"rendered":"\n

The Entrance Animations<\/em> feature lets you animate your Widgets<\/em>, Sections<\/em>, and Columns<\/em>. This way, as your site visitor scrolls down the page, the elements appear with an entrance animation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
  1. Right-click the Section<\/em>, Column<\/em>, or Widget\u2019s<\/em> handle \"\" to edit the element.<\/li>
  2. Go to the element\u2019s Advanced > Motion Effects<\/em> tab.<\/li>
  3. Choose an animation from the Entrance Animation<\/i> dropdown selections. Note that you can choose your Entrance animation, including “None”, per device.<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    You can choose from 37 different entrance animations including:<\/p>\n\n\n\n

    1. Fading<\/strong>: Fade in, fade in up, down, left, right<\/li>
    2. Zooming<\/strong>: Zoom in, zoom in up, down, left, right,<\/li>
    3. Bouncing<\/strong>: Bounce in, bounce in up, down, left, right<\/li>
    4. Sliding<\/strong>: Slide in up, down, left, right<\/li>
    5. Rotating<\/strong>: Rotate in, rotate in down left, down right, up left, up right<\/li>
    6. Attention<\/strong> seekers<\/strong>: Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello<\/li>
    7. Light<\/b> speed<\/b>: Light speed in<\/li>
    8. Specials<\/strong>: Roll in<\/li><\/ol>\n\n\n\n

       See it live in our  Entrance Animations release post<\/a>. <\/p>\n\n\n\n

      \n

      Note<\/strong>: Elementor respects the “reduced motion property” preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:<\/p>\n\n\n\n

      • Mac: “System Preferences > Accessibility > Display” and check\/un-check the box for “Reduce motion”<\/li>
      • iOS: “Settings > General > Accessibility” and turn on\/off “Reduce Motion”<\/li>
      • Windows 10: “Settings > Ease of Access > Display > Simplify and Personalise Windows” and turn on\/off “Show Animations in Windows”<\/li><\/ul>\n<\/div>\n\n\n\n

        Note<\/strong>: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references “maximum call stack size exceeded”. To resolve the issue, either remove entrance animations from widgets with motion effects and\/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated. <\/p>\n\n\n\n

        <\/p>\n","protected":false},"excerpt":{"rendered":"

        Learn how to animate widgets, sections, and columns with entrance animation<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3d8b5f792bb5ce343cae4"],"footnotes":""},"categories":[1439],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-basic-functionality","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"\nAdd entrance animations to your page | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Add entrance animations to your page 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\/entrance-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add entrance animations to your page | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Add entrance animations to your page in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/entrance-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-06T06:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-14T12:51:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"452\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Add entrance animations to your page\",\"datePublished\":\"2023-08-06T06:00:00+00:00\",\"dateModified\":\"2024-01-14T12:51:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/\"},\"wordCount\":354,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Basic functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/entrance-animations\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/\",\"url\":\"https:\/\/elementor.com\/help\/entrance-animations\/\",\"name\":\"Add entrance animations to your page | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif\",\"datePublished\":\"2023-08-06T06:00:00+00:00\",\"dateModified\":\"2024-01-14T12:51:01+00:00\",\"description\":\"Learn everything about Add entrance animations to your page in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/entrance-animations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif\",\"width\":800,\"height\":452},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/entrance-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Basic functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Add entrance animations to your page\"}]},{\"@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\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add entrance animations to your page | Elementor","description":"Learn everything about Add entrance animations to your page 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\/entrance-animations\/","og_locale":"en_US","og_type":"article","og_title":"Add entrance animations to your page | Elementor","og_description":"Learn everything about Add entrance animations to your page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/entrance-animations\/","og_site_name":"Help","article_published_time":"2023-08-06T06:00:00+00:00","article_modified_time":"2024-01-14T12:51:01+00:00","og_image":[{"width":800,"height":452,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif","type":"image\/gif"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/entrance-animations\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Add entrance animations to your page","datePublished":"2023-08-06T06:00:00+00:00","dateModified":"2024-01-14T12:51:01+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/"},"wordCount":354,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Basic functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/entrance-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/entrance-animations\/","url":"https:\/\/elementor.com\/help\/entrance-animations\/","name":"Add entrance animations to your page | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif","datePublished":"2023-08-06T06:00:00+00:00","dateModified":"2024-01-14T12:51:01+00:00","description":"Learn everything about Add entrance animations to your page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/entrance-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/entrance-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/entrance-animations\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/animations-blog.gif","width":800,"height":452},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/entrance-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Basic functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/"},{"@type":"ListItem","position":5,"name":"Add entrance animations to your page"}]},{"@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\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/345","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":43231,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/345\/revisions\/43231"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}