{"id":55025,"date":"2025-01-26T11:03:27","date_gmt":"2025-01-26T09:03:27","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=55025"},"modified":"2026-02-01T15:01:20","modified_gmt":"2026-02-01T13:01:20","slug":"use-ai-to-add-animation-effects","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/","title":{"rendered":"Use AI to add animation effects"},"content":{"rendered":"\n

Motion effects are a great way to make your webpages easier to navigate, more lively and better at driving user engagement and conversion. Unfortunately, adding these animation effects can be difficult and time consuming. Elementor AI can greatly simplify from process.<\/p>\n\n\n\n

Add animation effects<\/h2>\n\n\n\n

[callout type=”note”]We recommend using Elementor Pro to take advantage of the full array of motion effects.[\/callout]<\/p>\n\n\n\n

Elementor AI allows you to describe, in plain English, what animation effects you want while Elementor AI takes care of setting the correct options for you. <\/p>\n\n\n\n

To add animation effects with Elementor AI<\/strong>:<\/p>\n\n\n\n

[callout type=”note”]In this example. We\u2019ll add an image that will move around when visitors hover over the cursor over it. [\/callout]<\/p>\n\n\n\n

    \n
  1. Drag an Image widget to the canvas. For details, see Add elements to a page<\/a>.
    \"\"<\/li>\n\n\n\n
  2. Add content to the Image widget. For details, see Image widget<\/a>. 
    \"\"<\/li>\n\n\n\n
  3. Click the Advanced<\/strong> tab.
    \"\"<\/li>\n\n\n\n
  4. In the panel, open the Motion Effects<\/strong> section.
    \"\"<\/li>\n\n\n\n
  5. Click the Animate with AI <\/strong>icon.
    [callout type=”note”]You can also use Animate with AI<\/strong> for hover effects by opening the Transform<\/strong> section, selecting Hover<\/strong> and clicking the animate with AI icon.
    \"\"
    [\/callout]
    \"\"
    The AI window appears.
    \"\"<\/li>\n\n\n\n
  6. In the AI window, in the text box, enter Move around on hover.<\/strong>
    [callout type=”tip”]The prompt should contain a specific effect you want to occur. For instance, if you prompt that you want a scrolling effect<\/strong> the AI will pick a scrolling effect whereas if you say that you want an image to Fade out<\/strong>, when the user scrolls, the AI will apply the fade out effect.[\/callout]
    \"\"<\/li>\n\n\n\n
  7. Click Generate Animation<\/strong>.
    This will generate the options necessary to create the effect.
    \"\"<\/li>\n\n\n\n
  8. Click Use animation<\/strong>. 
    \"\"
    In the panel, you can see the necessary options are selected.
    [callout type=”note]If you have already added motion effects to the element, Animate with AI will merge those effects with the ones created with AI.[\/callout]
    \"\"
    The element contains the desired motion effect. <\/li>\n<\/ol>\n\n\n\n

    [callout type=”note”]Animate AI does not work with sticky effects and cannot apply responsive settings.[\/callout]<\/p>\n\n\n\n

    [callout type=”note”]Animate with AI creates effects using the Elementor Editor settings. It cannot create effects not supported by motion<\/a> or transform<\/a> settings.[\/callout]<\/p>\n","protected":false},"excerpt":{"rendered":"

    Motion effects are a great way to make your webpages easier to navigate, more lively and better at driving user engagement and conversion. Unfortunately, adding these animation effects can be difficult and time consuming. Elementor AI can greatly simplify from process. Add animation effects [callout type=”note”]We recommend using Elementor Pro to take advantage of 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":["6795fa627e33dcb55d634edc"],"footnotes":""},"categories":[1440],"tags":[1418],"class_list":["post-55025","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-version-3-27"],"acf":[],"yoast_head":"\nUse AI to add animation effects | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Use AI to add animation effects 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\/use-ai-to-add-animation-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use AI to add animation effects | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Use AI to add animation effects in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-26T09:03:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-01T13:01:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"611\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Use AI to add animation effects\",\"datePublished\":\"2025-01-26T09:03:27+00:00\",\"dateModified\":\"2026-02-01T13:01:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\"},\"wordCount\":380,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png\",\"keywords\":[\"Version 3.27\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\",\"url\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\",\"name\":\"Use AI to add animation effects | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png\",\"datePublished\":\"2025-01-26T09:03:27+00:00\",\"dateModified\":\"2026-02-01T13:01:20+00:00\",\"description\":\"Learn everything about Use AI to add animation effects in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png\",\"width\":1600,\"height\":611},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#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\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Use AI to add animation effects\"}]},{\"@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":"Use AI to add animation effects | Elementor","description":"Learn everything about Use AI to add animation effects 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\/use-ai-to-add-animation-effects\/","og_locale":"en_US","og_type":"article","og_title":"Use AI to add animation effects | Elementor","og_description":"Learn everything about Use AI to add animation effects in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/","og_site_name":"Help","article_published_time":"2025-01-26T09:03:27+00:00","article_modified_time":"2026-02-01T13:01:20+00:00","og_image":[{"width":1600,"height":611,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Use AI to add animation effects","datePublished":"2025-01-26T09:03:27+00:00","dateModified":"2026-02-01T13:01:20+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/"},"wordCount":380,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png","keywords":["Version 3.27"],"articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/","url":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/","name":"Use AI to add animation effects | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png","datePublished":"2025-01-26T09:03:27+00:00","dateModified":"2026-02-01T13:01:20+00:00","description":"Learn everything about Use AI to add animation effects in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/01\/image-43.png","width":1600,"height":611},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/use-ai-to-add-animation-effects\/#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":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Use AI to add animation effects"}]},{"@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\/55025","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=55025"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/55025\/revisions"}],"predecessor-version":[{"id":163173,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/55025\/revisions\/163173"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=55025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=55025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=55025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}