{"id":19932,"date":"2026-10-14T09:13:31","date_gmt":"2026-10-14T09:13:31","guid":{"rendered":"https:\/\/animation-addons.com\/?post_type=docs&p=19932"},"modified":"2026-10-14T09:13:32","modified_gmt":"2026-10-14T09:13:32","slug":"regular-animation","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/","title":{"rendered":"Regular Animation"},"content":{"rendered":"\n<style>\nhtml{scroll-behavior:smooth;scroll-padding-top:110px}\n.aa-card>.wp-block-group__inner-container>*,.aa-mini>.wp-block-group__inner-container>*,.aa-callout>.wp-block-group__inner-container>*,.aa-row>.wp-block-group__inner-container>*,.aa-final>.wp-block-group__inner-container>*{margin-top:0!important;margin-bottom:0!important}\n.aa-card>.wp-block-group__inner-container>*+*{margin-top:18px!important}\n.aa-row>.wp-block-group__inner-container>*+*{margin-top:8px!important}\n.aa-mini>.wp-block-group__inner-container>*+*{margin-top:2px!important}\n.aa-final>.wp-block-group__inner-container>*+*{margin-top:10px!important}\n.aa-card p,.aa-row p,.aa-callout p,.aa-final p{line-height:1.65}\n.aa-mini p{line-height:1.35}\n.aa-card figure,.aa-row figure{margin:0}\n.aa-mini{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}\n.aa-mini:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:#f05a35!important}\n.aa-row{transition:background .2s ease;border-radius:10px}\n.aa-row:hover{background:#fafbfc}\n.aa-steps{list-style:none!important;margin:0!important;padding:0!important;counter-reset:aa}\n.aa-steps li{counter-increment:aa;position:relative;padding:3px 0 3px 46px!important;margin:0 0 14px!important;min-height:32px;line-height:1.6}\n.aa-steps li:last-child{margin-bottom:0!important}\n.aa-steps li::before{content:counter(aa);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#fff1ec;color:#f05a35;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}\n.aa-pill{display:inline-block;font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:999px;background:#f1f5f9;color:#475569;margin-right:6px;vertical-align:1px}\n.wp-block-details.aa-acc{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin:0;overflow:hidden;transition:box-shadow .2s ease}\n.wp-block-details.aa-acc+.wp-block-details.aa-acc{margin-top:12px}\n.wp-block-details.aa-acc:hover{box-shadow:0 6px 18px rgba(15,23,42,.06)}\n.wp-block-details.aa-acc summary{cursor:pointer;font-weight:600;padding:14px 20px;line-height:1.5;list-style:none;display:flex;justify-content:space-between;align-items:center}\n.wp-block-details.aa-acc summary::-webkit-details-marker{display:none}\n.wp-block-details.aa-acc summary::after{content:\"+\";font-size:22px;line-height:1;color:#f05a35;transition:transform .2s ease}\n.wp-block-details.aa-acc[open] summary::after{transform:rotate(45deg)}\n.wp-block-details.aa-acc[open] summary{background:#fff7f4;border-bottom:1px solid #fde1d8}\n.wp-block-details.aa-acc>*:not(summary){margin:0!important;padding:16px 20px}\n.wp-block-details.aa-acc table{margin:0}\n@media(max-width:600px){.aa-card{padding:20px!important}}\n.aa-card>.wp-block-group__inner-container,.aa-mini>.wp-block-group__inner-container,.aa-callout>.wp-block-group__inner-container,.aa-row>.wp-block-group__inner-container,.aa-rows>.wp-block-group__inner-container,.aa-final>.wp-block-group__inner-container{padding:0!important}\n<\/style>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;margin-top:0;margin-bottom:24px;font-size:18px;line-height:1.65\">Animate any element when the page loads, when it scrolls into view, or when a visitor hovers or clicks it. Pick one of 22 ready animations, or build your own.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a3754bcf wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:16px\">\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">WORKS ON<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Any V4 element<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">TRIGGERS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Scroll, Load, Hover, Click<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">PLAN<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Pro<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">BEFORE YOU START<\/p>\n\n\n\n<h2 id=\"requirement\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Requirement<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a3754bcf wp-block-group-is-layout-grid\" style=\"margin-top:0;margin-bottom:16px\">\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">ELEMENTOR<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">V4 Atomic<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">ANIMATION ADDONS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Free<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-mini has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:14px;background-color:#f8fafc;padding-top:16px;padding-right:18px;padding-bottom:16px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-3e33a9f7 wp-block-group-is-layout-constrained\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;font-size:12px;font-weight:700;letter-spacing:0.08em;line-height:1.4\">ANIMATION ADDONS PRO<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:17px;font-weight:600;line-height:1.4\">Active license<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Install and activate both Animation Addons plugins before you start. The animation only plays on the live page when Pro is active.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 1<\/p>\n\n\n\n<h2 id=\"enable-the-extension\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Enable the Extension<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Turn on the extension from your dashboard. You only need to do this once.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>From your <strong>WordPress Dashboard<\/strong>, go to <strong>Animation Addon > Extensions<\/strong>.<\/li>\n\n\n\n<li>Open the <strong>Elementor V4 (Atomic)<\/strong> tab.<\/li>\n\n\n\n<li>Under <strong>Animation Extensions<\/strong>, turn on <strong>Regular Animation<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Save Settings<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecba6fe9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecba6fe9\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1260\" height=\"490\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp\" alt=\"Enable Regular Animation extension\" class=\"has-border-color wp-image-19933\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp 1260w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension-300x117.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension-1024x398.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension-768x299.webp 768w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Regular Animation Extension (click to zoom)<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 2<\/p>\n\n\n\n<h2 id=\"add-an-interaction\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Add an Interaction<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Each animation is called an <strong>interaction<\/strong>. One interaction is one trigger plus one animation.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Open your page with the <strong>Elementor Editor<\/strong>.<\/li>\n\n\n\n<li>Select any V4 element, for example a <strong>Heading<\/strong>.<\/li>\n\n\n\n<li>In the <strong>General<\/strong> tab, open the <strong>Animation<\/strong> section.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button next to <strong>Interactions<\/strong>, or click <strong>+ Add Interaction<\/strong>.<\/li>\n\n\n\n<li>Click the new row to open its options.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecba7af5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecba7af5\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img decoding=\"async\" width=\"450\" height=\"1050\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-01-open-section.webp\" alt=\"Animation section in the General tab\" class=\"has-border-color wp-image-19934\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-01-open-section.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-01-open-section-129x300.webp 129w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-01-open-section-439x1024.webp 439w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Animation section in the General tab (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecba8023&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecba8023\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img decoding=\"async\" width=\"450\" height=\"1230\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-02-interaction.webp\" alt=\"An interaction with its options\" class=\"has-border-color wp-image-19935\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-02-interaction.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-02-interaction-110x300.webp 110w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-02-interaction-375x1024.webp 375w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">A new interaction. It starts with Classic Fade Up on scroll (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Click the <strong>play<\/strong> button on the row to preview the animation inside the editor.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">STEP 3<\/p>\n\n\n\n<h2 id=\"choose-the-animation\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Choose the Animation<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Pick a ready animation from the <strong>Animation<\/strong> list. The <strong>From<\/strong> and <strong>To<\/strong> properties fill in for you.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Open the <strong>Animation<\/strong> list and choose one, for example <strong>Blur Reveal<\/strong>.<\/li>\n\n\n\n<li>Choose a <strong>Trigger<\/strong>, for example <strong>On Click<\/strong>.<\/li>\n\n\n\n<li>Adjust <strong>Delay<\/strong> and <strong>Duration<\/strong> if you want.<\/li>\n\n\n\n<li>Click <strong>Update<\/strong> to save your page.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecba8895&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecba8895\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"570\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-04-animations.webp\" alt=\"Animation list\" class=\"has-border-color wp-image-19937\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-04-animations.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-04-animations-237x300.webp 237w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Animation list (click to zoom)<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">SETTINGS<\/p>\n\n\n\n<h2 id=\"interaction-options\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Interaction Options<\/h2>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Animation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Classic Fade Up<\/span>The look of the animation. See the full list below. Choose <strong>Custom Animations<\/strong> to build your own.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: From To<\/span><strong>From<\/strong> starts from your values and ends at the normal state. <strong>To<\/strong> goes from the normal state to your values. <strong>From To<\/strong> lets you set both. <strong>Set<\/strong> (custom only) jumps to your values at once.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Trigger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: On Scroll<\/span>What starts the animation. See the trigger list below.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Trigger Selector<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">For <strong>On Hover<\/strong> and <strong>On Click<\/strong>. Type a class like <code>.my-button<\/code> to start the animation from another element. Leave it empty to use the element itself.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Wrapper<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Default<\/span>For scroll triggers. Choose <strong>Custom<\/strong> to set your own <strong>Start Trigger<\/strong> and <strong>End Trigger<\/strong> classes.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Start \/ End<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: top 85% \/ bottom bottom<\/span>For scroll triggers. <strong>top 85%<\/strong> means: when the top of the element reaches 85% down the screen.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Delay<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: 0.15<\/span>Seconds to wait before the animation starts.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Duration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: 1.5<\/span>How many seconds the animation takes.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Ease<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Power2.out<\/span>The speed curve: Power2.out, Bounce, Back, Elastic, Slowmo, Stepped, Sine, Expo or None.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">From \/ To Properties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The values the animation moves between, like <strong>Opacity<\/strong>, <strong>X<\/strong>, <strong>Y<\/strong>, <strong>Scale<\/strong> or <strong>Rotate<\/strong>. Click <strong>+ Add Property<\/strong> to add more.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Markers<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><span class=\"aa-pill\">Default: Off<\/span>For scroll triggers. Shows start and end lines on the page, so you can test the positions.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecba9819&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecba9819\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"990\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-03-properties.webp\" alt=\"From and To properties\" class=\"has-border-color wp-image-19936\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-03-properties.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-03-properties-136x300.webp 136w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">From and To properties (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"triggers\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Triggers<\/h2>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">On Scroll<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Plays when the element scrolls into view.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">On Page Load<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Plays as soon as the page loads.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Play With Scroll<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The animation follows your scroll position, forward and backward.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">On Hover<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Plays when the visitor moves the mouse over the element.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">On Click<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Plays when the visitor clicks the element.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">On Slide Change<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Plays when a slider changes slide.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> You can add many interactions to one element. <strong>On Page Load<\/strong> allows one per element. <strong>On Scroll<\/strong> and <strong>Play With Scroll<\/strong> share one slot. <strong>On Hover<\/strong> and <strong>On Click<\/strong> are unlimited.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">LIBRARY<\/p>\n\n\n\n<h2 id=\"ready-animations\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Ready Animations<\/h2>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Choose any of these from the <strong>Animation<\/strong> list:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Classic Fade Up<\/li>\n\n\n\n<li>Blur Reveal (Apple Style)<\/li>\n\n\n\n<li>Skew Up (Awwwards)<\/li>\n\n\n\n<li>Clip-Path Unmask<\/li>\n\n\n\n<li>Scale In Pop<\/li>\n\n\n\n<li>Zoom Out<\/li>\n\n\n\n<li>3D Flip Up<\/li>\n\n\n\n<li>Swing Drop<\/li>\n\n\n\n<li>Elastic Pop<\/li>\n\n\n\n<li>3D Card Flip (Y)<\/li>\n\n\n\n<li>Spin &amp; Scale<\/li>\n\n\n\n<li>Slide Right<\/li>\n\n\n\n<li>Cinematic Focus (Premium)<\/li>\n\n\n\n<li>Mask Reveal Up (Luxury)<\/li>\n\n\n\n<li>Perspective Fall (3D)<\/li>\n\n\n\n<li>3D Unfold (SaaS)<\/li>\n\n\n\n<li>Magnetic Slide<\/li>\n\n\n\n<li>Luxury Drift (Colorize)<\/li>\n\n\n\n<li>SaaS Dashboard Build<\/li>\n\n\n\n<li>E-com Product Unbox<\/li>\n\n\n\n<li>Neon Glow Pulse (Pricing)<\/li>\n\n\n\n<li>Gentle Float In (Editorial)<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">RESULT<\/p>\n\n\n\n<h2 id=\"final-result\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Final Result<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Six of the animations, one by one. In these examples the trigger is <strong>On Click<\/strong>, and the GIFs are slowed down so you can see each step.<\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Classic Fade Up<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbaa5d5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbaa5d5\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"340\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-05-fade-up.gif\" alt=\"Classic Fade Up animation\" class=\"has-border-color wp-image-19938\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Classic Fade Up<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Blur Reveal<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbaa978&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbaa978\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"340\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-06-blur-reveal.gif\" alt=\"Blur Reveal animation\" class=\"has-border-color wp-image-19939\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Blur Reveal<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Clip-Path Unmask<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbaad5a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbaad5a\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"341\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-07-clip-unmask.gif\" alt=\"Clip-Path Unmask animation\" class=\"has-border-color wp-image-19940\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Clip-Path Unmask<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">3D Flip Up<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbab136&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbab136\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"340\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-08-flip-up-3d.gif\" alt=\"3D Flip Up animation\" class=\"has-border-color wp-image-19941\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">3D Flip Up<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Elastic Pop<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbab551&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbab551\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"340\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-09-elastic-pop.gif\" alt=\"Elastic Pop animation\" class=\"has-border-color wp-image-19942\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Elastic Pop<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Spin &amp; Scale<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbab8e5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbab8e5\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"341\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-10-spin-scale.gif\" alt=\"Spin and Scale animation\" class=\"has-border-color wp-image-19943\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Spin &amp; Scale<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">ADVANCED<\/p>\n\n\n\n<h2 id=\"advanced-examples\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Advanced Examples<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#64748b;margin-top:0;margin-bottom:24px;font-size:18px;line-height:1.65\">Five real setups you can copy. Each one shows the settings and the result. The GIFs are slowed down.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">1. Build Your Own Animation<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Choose <strong>Custom Animations<\/strong> in the <strong>Animation<\/strong> list, then write your own <strong>From<\/strong> and <strong>To<\/strong> values. You can animate more than movement: color, rounded corners, blur and more.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li><strong>Animation:<\/strong> Custom Animations. <strong>Method:<\/strong> From To. <strong>Trigger:<\/strong> On Click. <strong>Duration:<\/strong> 2.<\/li>\n\n\n\n<li><strong>From:<\/strong> Opacity <code>0<\/code>, Scale <code>0.4<\/code>, Rotation <code>-180<\/code>, Border Radius <code>50%<\/code>, Background Color <code>#6366f1<\/code>.<\/li>\n\n\n\n<li><strong>To:<\/strong> Opacity <code>1<\/code>, Scale <code>1<\/code>, Rotation <code>0<\/code>, Border Radius <code>24px<\/code>, Background Color <code>#ffffff<\/code>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbabf65&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbabf65\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"1105\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-13-custom-properties.webp\" alt=\"Custom From and To properties\" class=\"has-border-color wp-image-19947\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-13-custom-properties.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-13-custom-properties-122x300.webp 122w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-13-custom-properties-417x1024.webp 417w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">From and To properties (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbac328&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbac328\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"396\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-15-custom-animation.gif\" alt=\"Custom animation\" class=\"has-border-color wp-image-19949\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The card spins in as a round purple pill, then settles into a white card<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Click <strong>Property<\/strong> and pick from the list, or type any property name yourself. Use plain numbers, or values with units like <code>24px<\/code> and <code>50%<\/code>.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">2. Start the Animation from Another Element<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The element you animate and the element the visitor touches can be different. Here, hovering a button makes a card pop.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Select the <strong>button<\/strong>. In <strong>Settings<\/strong>, set <strong>ID<\/strong> to <code>hover-btn<\/code>.<\/li>\n\n\n\n<li>Select the <strong>card<\/strong> you want to animate. Add an interaction.<\/li>\n\n\n\n<li>Set <strong>Trigger<\/strong> to <strong>On Hover<\/strong>.<\/li>\n\n\n\n<li>Set <strong>Trigger Selector<\/strong> to <code>#hover-btn<\/code>. Use <code>#<\/code> for an ID and <code>.<\/code> for a class.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbac9d8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbac9d8\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"840\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-11-hover-selector.webp\" alt=\"Trigger Selector set to the button ID\" class=\"has-border-color wp-image-19945\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-11-hover-selector.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-11-hover-selector-161x300.webp 161w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Trigger Selector points to the button (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbacdb6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbacdb6\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"674\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-16-hover-selector.gif\" alt=\"Hover trigger from another element\" class=\"has-border-color wp-image-19950\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Hover the button and the card below it pops in<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">3. Follow the Scroll<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">With <strong>Play With Scroll<\/strong> the animation is tied to the scroll bar. Scroll down and it plays forward. Scroll up and it plays backward.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Choose an animation, for example <strong>Scale In Pop<\/strong>.<\/li>\n\n\n\n<li>Set <strong>Trigger<\/strong> to <strong>Play With Scroll<\/strong>.<\/li>\n\n\n\n<li>Set <strong>Start<\/strong> to <code>top 85%<\/code> and <strong>End<\/strong> to <code>top 35%<\/code>. The animation runs while the element moves between these two points on the screen.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbad375&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbad375\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"900\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-12-play-with-scroll.webp\" alt=\"Play With Scroll trigger with Start and End\" class=\"has-border-color wp-image-19946\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-12-play-with-scroll.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-12-play-with-scroll-150x300.webp 150w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Play With Scroll settings (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbad6df&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbad6df\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"448\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-17-play-with-scroll.gif\" alt=\"Play With Scroll animation\" class=\"has-border-color wp-image-19951\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Scrolling down grows the card. Scrolling up shrinks it again<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#fed7aa;border-width:1px;border-radius:12px;background-color:#fff7ed;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Turn on <strong>Markers<\/strong> to see the start and end lines on the page while you test.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">4. Show Items One After Another<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Use the <strong>Delay<\/strong> to make a row of items appear one by one. Give each item the same animation and a bigger delay.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Add the same <strong>On Scroll<\/strong> animation to each item, for example <strong>Classic Fade Up<\/strong>.<\/li>\n\n\n\n<li>Set <strong>Delay<\/strong> to <code>0.1<\/code> on the first item.<\/li>\n\n\n\n<li>Set <strong>Delay<\/strong> to <code>0.5<\/code> on the second item, and <code>0.9<\/code> on the third.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbaddfb&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbaddfb\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"250\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-18-stagger.gif\" alt=\"Staggered scroll animation\" class=\"has-border-color wp-image-19952\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Card One, Card Two and Card Three appear one after another<\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">5. Two Animations on One Element<\/h3>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group aa-card has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-0cb15eab wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">One element can have many interactions. Here the same heading reacts to hover and to click.<\/p>\n\n\n\n<ol class=\"wp-block-list aa-steps\">\n<li>Add the first interaction: <strong>Animation:<\/strong> Custom Animations, <strong>Method:<\/strong> To, <strong>Trigger:<\/strong> On Hover. Set <strong>To<\/strong> values <strong>Scale<\/strong> <code>1.12<\/code> and <strong>Rotation<\/strong> <code>3<\/code>. Set <strong>Duration<\/strong> <code>0.4<\/code> and <strong>Delay<\/strong> <code>0<\/code>.<\/li>\n\n\n\n<li>Click <strong>+ Add Interaction<\/strong>. Choose <strong>Spin &amp; Scale<\/strong> with <strong>Trigger<\/strong> <strong>On Click<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbae3b2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbae3b2\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"300\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-14-multiple-interactions.webp\" alt=\"Two interactions on one element\" class=\"has-border-color wp-image-19948\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-14-multiple-interactions.webp 450w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-14-multiple-interactions-300x200.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-14-multiple-interactions-60x40.webp 60w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Two interactions on one element (click to zoom)<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad20ecbae83f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad20ecbae83f\" class=\"aligncenter size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"396\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-19-multiple-interactions.gif\" alt=\"Hover and click on one element\" class=\"has-border-color wp-image-19953\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:12px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Hover gives a small tilt. Click gives a full spin<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group aa-callout has-border-color has-background\" style=\"border-color:#bfdbfe;border-width:1px;border-radius:12px;background-color:#eff6ff;margin-top:16px;margin-bottom:0;padding-top:14px;padding-right:18px;padding-bottom:14px;padding-left:18px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-1181cb02 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> A hover animation plays once and then returns to the normal look. Move the mouse out and in again to play it again.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">GOOD TO KNOW<\/p>\n\n\n\n<h2 id=\"how-it-works\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">How It Works<\/h2>\n\n\n\n<div class=\"wp-block-group aa-rows has-border-color has-background\" style=\"border-color:#e5e7eb;border-width:1px;border-radius:16px;background-color:#ffffff;padding-top:8px;padding-right:16px;padding-bottom:8px;padding-left:16px;box-shadow:0 4px 24px rgba(15,23,42,0.06)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-225a00f3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Build your own<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Choose <strong>Custom Animations<\/strong> in the list, then add your own <strong>From<\/strong> and <strong>To<\/strong> properties.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Per device<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The interactions list can be different on desktop, tablet and mobile. Switch the device in the editor and change it.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Live page only<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">The animation runs on the live page. Inside the editor use the play button on the row.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group aa-row\" style=\"border-bottom-color:#eef0f3;border-bottom-width:1px;padding-top:16px;padding-right:12px;padding-bottom:16px;padding-left:12px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-d0cae242 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:0;font-size:20px;font-weight:600;line-height:1.4\">Only loads when used<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Pages with no interaction do not load any animation script.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#f05a35;margin-top:56px;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:0.08em;line-height:1.2\">HELP<\/p>\n\n\n\n<h2 id=\"troubleshooting\" class=\"wp-block-heading\" style=\"margin-top:0;margin-bottom:16px;font-size:30px;font-weight:700;line-height:1.25\">Troubleshooting<\/h2>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>I do not see the Animation section<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Check that the extension is on. Go to <strong>Animation Addon > Extensions > Elementor V4 (Atomic)<\/strong> and turn on <strong>Regular Animation<\/strong>. Then reload the editor and select a V4 element.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>The animation does not play on my page<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">Pro must be active with a valid license. Update the page and clear your cache. Test on the live page, not in the editor.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>It plays once and never again<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\"><strong>On Scroll<\/strong> plays when the element enters the screen. For an animation you can repeat, use <strong>On Click<\/strong> or <strong>On Hover<\/strong>.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details aa-acc is-layout-flow wp-block-details-is-layout-flow\"><summary>I cannot add another On Page Load interaction<\/summary>\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0\">An element can have only one <strong>On Page Load<\/strong> interaction, and one scroll interaction. Hover and click interactions are unlimited.<\/p>\n<\/details>\n\n\n\n<div class=\"wp-block-group aa-final has-background is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-0ff90192 wp-block-group-is-layout-flex\" style=\"border-radius:20px;background:linear-gradient(135deg,#fff1ec 0%,#f5f3ff 100%);margin-top:56px;padding-top:36px;padding-right:28px;padding-bottom:36px;padding-left:28px\">\n<h2 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;font-size:30px;font-weight:700;line-height:1.25\">You Did It<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Your element now animates the way you chose. If you face any problem, please contact our support team. We are happy to help.<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Animate any element when the page loads, when it scrolls into view, or when a visitor hovers or clicks it. Pick one of 22 ready animations, or build your own. WORKS ON Any V4 element TRIGGERS Scroll, Load, Hover, Click PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":19789,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-19932","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Regular Animation - Animation Addons<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Regular Animation - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"Animate any element when the page loads, when it scrolls into view, or when a visitor hovers or clicks it. Pick one of 22 ready animations, or build your own. WORKS ON Any V4 element TRIGGERS Scroll, Load, Hover, Click PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-14T09:13:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\n\t<meta property=\"og:image:height\" content=\"490\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/\",\"name\":\"Regular Animation - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/regular-animation-v4-00-enable-extension.webp\",\"datePublished\":\"2026-10-14T09:13:31+00:00\",\"dateModified\":\"2026-10-14T09:13:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/regular-animation-v4-00-enable-extension.webp\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/regular-animation-v4-00-enable-extension.webp\",\"width\":1260,\"height\":490,\"caption\":\"Enable Regular Animation extension\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/regular-animation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"V4 Extentions\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/v4-extentions\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Regular Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Regular Animation - Animation Addons","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:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/","og_locale":"en_US","og_type":"article","og_title":"Regular Animation - Animation Addons","og_description":"Animate any element when the page loads, when it scrolls into view, or when a visitor hovers or clicks it. Pick one of 22 ready animations, or build your own. WORKS ON Any V4 element TRIGGERS Scroll, Load, Hover, Click PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO [&hellip;]","og_url":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2026-10-14T09:13:32+00:00","og_image":[{"width":1260,"height":490,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/","url":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/","name":"Regular Animation - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp","datePublished":"2026-10-14T09:13:31+00:00","dateModified":"2026-10-14T09:13:32+00:00","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2026\/10\/regular-animation-v4-00-enable-extension.webp","width":1260,"height":490,"caption":"Enable Regular Animation extension"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/v4-extentions\/regular-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"V4 Extentions","item":"https:\/\/animation-addons.com\/docs\/v4-extentions\/"},{"@type":"ListItem","position":3,"name":"Regular Animation"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/003ea1731c068e74c9c0b21151292d0421daa8e37b4cbd3b694787ebf5175e49?s=96&d=mm&r=g","author_name":"ahsan","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/19932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=19932"}],"version-history":[{"count":2,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/19932\/revisions"}],"predecessor-version":[{"id":19954,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/19932\/revisions\/19954"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/19789"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=19932"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=19932"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=19932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}