{"id":4241,"date":"2026-10-28T04:24:45","date_gmt":"2026-10-28T04:24:45","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/motion-effects\/"},"modified":"2026-11-04T05:18:38","modified_gmt":"2026-11-04T05:18:38","password":"","slug":"motion-effects","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/motion-effects\/","title":{"rendered":"Motion Effects"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Motion Effects add movement to any block: an entrance animation when it scrolls into view, effects that follow the scroll, effects that follow the mouse, and sticky positioning. They work on ShapeBlock blocks, core blocks, and blocks from other plugins.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add Entrance, Scroll and Mouse Animations in WordPress Gutenberg | ShapeBlock Pro\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/rORnZHBT_lk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Motion Effects<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Make Sure the Feature Is On<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>In your WordPress dashboard, go to <strong>ShapeBlock &gt; Extensions<\/strong>.<\/li>\n\n\n\n<li>Find the <strong>Motion Effects<\/strong> card and turn its switch on. The change is saved right away.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"19\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-1.webp\" alt=\"ShapeBlock Extensions page with the Motion Effects card\" class=\"wp-image-4239\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-1.webp 980w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-1-600x12.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-1-300x6.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-1-768x15.webp 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add an Effect to a Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the block editor and select any block.<\/li>\n\n\n\n<li>In the right-hand sidebar, open the <strong>Motion Effects<\/strong> panel. On ShapeBlock blocks it is in the Settings tab.<\/li>\n\n\n\n<li>Set the effects you want. Every effect plays in the editor as you set it.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Motion Effects Settings<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Entrance Animation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Entrance Animation:<\/strong> Choose an animation that plays when the block scrolls into view. The list is grouped into Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed, and Specials, for example Fade In Up, Zoom In, Bounce In, or Slide In Left.<\/li>\n\n\n\n<li><strong>Animation Duration:<\/strong> Choose Slow, Normal, Quick, Fast, or Custom. With Custom, set the <strong>Duration (ms)<\/strong>.<\/li>\n\n\n\n<li><strong>Delay (ms):<\/strong> Wait this long before the animation starts. Useful for making cards in a row come in one after another.<\/li>\n\n\n\n<li><strong>Play again each time it comes into view:<\/strong> Play the animation every time the block scrolls into view, not only the first time.<\/li>\n\n\n\n<li><strong>Preview:<\/strong> Play the animation again in the editor.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">On a dropdown or mega menu, the entrance animation plays each time the menu opens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Scrolling Effects<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn on <strong>Move the block as the page scrolls<\/strong>, then turn on one or more effects. Each effect starts when the block comes into view.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vertical Scroll:<\/strong> Move the block Up or Down. Set the <strong>Speed<\/strong>.<\/li>\n\n\n\n<li><strong>Horizontal Scroll:<\/strong> Move the block To Left or To Right. Set the <strong>Speed<\/strong>.<\/li>\n\n\n\n<li><strong>Transparency:<\/strong> Fade the block: Fade In, Fade Out, Fade Out In, or Fade In Out. Set the <strong>Level<\/strong>.<\/li>\n\n\n\n<li><strong>Blur:<\/strong> Blur the block with the same four choices. Set the <strong>Level<\/strong>.<\/li>\n\n\n\n<li><strong>Rotate:<\/strong> Turn the block To Left or To Right. Set the <strong>Speed<\/strong>.<\/li>\n\n\n\n<li><strong>Scale:<\/strong> Scale Up, Scale Down, Scale Down Up, or Scale Up Down. Set the <strong>Speed<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Each effect also has <strong>Starts at<\/strong> and <strong>Ends at<\/strong>, the part of the screen (in %, from the bottom) where the effect runs. Rotate and Scale also have <strong>X Anchor Point<\/strong> and <strong>Y Anchor Point<\/strong>, the point the block turns or grows around.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effects Relative To:<\/strong> Choose <strong>Viewport<\/strong> to run the effects as the block crosses the screen, or <strong>Entire Page<\/strong> to run them from the top of the page to its end.<\/li>\n\n\n\n<li><strong>Apply Effects On:<\/strong> Untick Desktop, Tablet, or Mobile to turn the scrolling effects off on that device.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Mouse Effects<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Turn on <strong>Move the block with the pointer<\/strong> to use these effects. They work on screens with a mouse.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mouse Track:<\/strong> The block moves with the pointer. Choose Opposite or Direct and set the Speed.<\/li>\n\n\n\n<li><strong>3D Tilt:<\/strong> The block tilts towards the pointer. Choose Direct or Opposite and set the Speed.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Sticky<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sticky:<\/strong> Choose <strong>Top<\/strong> or <strong>Bottom<\/strong> to keep the block at the top or bottom of the screen once it gets there. <strong>None<\/strong> turns it off.<\/li>\n\n\n\n<li><strong>Offset (px):<\/strong> Set the space between the block and the edge of the screen while it sticks.<\/li>\n\n\n\n<li><strong>Stay in its container:<\/strong> Let go of the block when the end of the block it sits in comes up.<\/li>\n\n\n\n<li><strong>Sticky On:<\/strong> Choose the devices where the block sticks.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1494\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-2.webp\" alt=\"Motion Effects panel in the block sidebar\" class=\"wp-image-4240\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-2.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-2-56x300.webp 56w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-motion-effects-2-192x1024.webp 192w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> Visitors who ask their device for reduced motion see the block still.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To stop Motion Effects on the whole site, turn off the Motion Effects card under <strong>ShapeBlock &gt; Extensions<\/strong>. Blocks keep their settings and simply stop moving.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Motion Effects add movement to any block: an entrance animation when it scrolls into view, effects that follow the scroll, effects that follow the mouse, and sticky positioning. They work on ShapeBlock blocks, core blocks, and blocks from other plugins. How to Use Motion Effects Step 1: Make Sure the Feature Is On Step 2: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[31],"doc_tag":[],"class_list":["post-4241","docs","type-docs","status-publish","hentry","doc_category-pro-extensions"],"year_month":"2026-11","word_count":625,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Pro Extensions","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-extensions\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4241"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4241\/revisions"}],"predecessor-version":[{"id":5542,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4241\/revisions\/5542"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4241"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4241"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}