{"id":1872,"date":"2022-09-19T17:43:03","date_gmt":"2022-09-19T17:43:03","guid":{"rendered":"https:\/\/shaplakanon.com\/wpsupport\/?p=1872"},"modified":"2022-09-19T17:43:06","modified_gmt":"2022-09-19T17:43:06","slug":"how-to-add-animation-based-on-scroll-in-wordpress","status":"publish","type":"post","link":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/","title":{"rendered":"How to add animation based on scroll in wordpress?"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.org\/plugins\/animated-blocks\/\">Animated Blocks on Scroll<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\" alt=\"\"\/><\/figure>\n\n\n\n<p>Add scroll based animations to WordPress Gutenberg blocks.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">FEATURES<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Choose from 76 cross-browser CSS3 animations or add your own<\/li><li>Preview animations in the editor<\/li><li>Adjust the animation duration, delay, scroll threshold, and offset<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">SETTINGS<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Duration: The speed of the animation in milliseconds.<\/li><li>Delay: How many milliseconds to wait before animating the element.<\/li><li>Threshold: Add animation when x% of the element enters the screen.<\/li><li>Start with opacity 0: Set the element to opacity 0 when the page loads. The option works for elements transitioning to 100% opacity through CSS.<\/li><li>Offset Top (available in the block\u2019s advanced settings): Number of pixels to offset the animated block from the top of the page. Useful when a page has a fixed top navigation bar.<\/li><li>Class name \u201cab-animation-end\u201d is added to the animated block after the CSS animation has ended. This class name can be used to add custom styles.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">REQUIREMENTS<\/h3>\n\n\n\n<p>PHP 5.6+ is recommended, WordPress 5.0+, and Gutenberg must be active.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DOCUMENTATION<\/h3>\n\n\n\n<p>Select Animated Block from the Layout Elements group and add any content blocks within it. Select an animation from the dropdown list or add your own custom CSS class. The selected animation or custom CSS class will be added to the block when the user scrolls to it.<\/p>\n\n\n\n<p>Animated Block is a parent block (a container), nesting as many blocks as you want.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animated Blocks on Scroll Add scroll based animations to WordPress Gutenberg blocks. FEATURES Choose from 76 cross-browser CSS3 animations or<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[157,340,56],"class_list":["post-1872","post","type-post","status-publish","format-standard","hentry","category-plugins","tag-wordpress-help","tag-wordpress-maintenance-service","tag-wordpress-support"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add animation based on scroll in wordpress? - WordPress Support<\/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:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add animation based on scroll in wordpress? - WordPress Support\" \/>\n<meta property=\"og:description\" content=\"Animated Blocks on Scroll Add scroll based animations to WordPress Gutenberg blocks. FEATURES Choose from 76 cross-browser CSS3 animations or\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WordPress Support\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/getwpsupport\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T17:43:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T17:43:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\" \/>\n<meta name=\"author\" content=\"Ruhul Amin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ruhul24\" \/>\n<meta name=\"twitter:site\" content=\"@ruhul24\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ruhul Amin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\"},\"author\":{\"name\":\"Ruhul Amin\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825\"},\"headline\":\"How to add animation based on scroll in wordpress?\",\"datePublished\":\"2022-09-19T17:43:03+00:00\",\"dateModified\":\"2022-09-19T17:43:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\"},\"wordCount\":229,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#organization\"},\"image\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\",\"keywords\":[\"wordpress help\",\"wordpress maintenance service\",\"wordpress support\"],\"articleSection\":[\"plugins\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\",\"url\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\",\"name\":\"How to add animation based on scroll in wordpress? - WordPress Support\",\"isPartOf\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\",\"datePublished\":\"2022-09-19T17:43:03+00:00\",\"dateModified\":\"2022-09-19T17:43:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\",\"contentUrl\":\"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shaplakanon.com\/wpsupport\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add animation based on scroll in wordpress?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#website\",\"url\":\"https:\/\/shaplakanon.com\/wpsupport\/\",\"name\":\"WordPress Support\",\"description\":\"Wordpress Repair, migration, speed optimization\",\"publisher\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shaplakanon.com\/wpsupport\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#organization\",\"name\":\"WordPress Support\",\"url\":\"https:\/\/shaplakanon.com\/wpsupport\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/shaplakanon.com\/wpsupport\/wp-content\/uploads\/sites\/2\/2022\/05\/cropped-logo-9674824.png\",\"contentUrl\":\"https:\/\/shaplakanon.com\/wpsupport\/wp-content\/uploads\/sites\/2\/2022\/05\/cropped-logo-9674824.png\",\"width\":274,\"height\":55,\"caption\":\"WordPress Support\"},\"image\":{\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/getwpsupport\/\",\"https:\/\/x.com\/ruhul24\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825\",\"name\":\"Ruhul Amin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28178d347289d520b52ece250f7042df?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28178d347289d520b52ece250f7042df?s=96&d=mm&r=g\",\"caption\":\"Ruhul Amin\"},\"sameAs\":[\"https:\/\/shaplakanon.com\/wdc\/\"],\"url\":\"https:\/\/shaplakanon.com\/wpsupport\/author\/sabahat\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add animation based on scroll in wordpress? - WordPress Support","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:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to add animation based on scroll in wordpress? - WordPress Support","og_description":"Animated Blocks on Scroll Add scroll based animations to WordPress Gutenberg blocks. FEATURES Choose from 76 cross-browser CSS3 animations or","og_url":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/","og_site_name":"WordPress Support","article_publisher":"https:\/\/facebook.com\/getwpsupport\/","article_published_time":"2022-09-19T17:43:03+00:00","article_modified_time":"2022-09-19T17:43:06+00:00","og_image":[{"url":"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903"}],"author":"Ruhul Amin","twitter_card":"summary_large_image","twitter_creator":"@ruhul24","twitter_site":"@ruhul24","twitter_misc":{"Written by":"Ruhul Amin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/"},"author":{"name":"Ruhul Amin","@id":"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"headline":"How to add animation based on scroll in wordpress?","datePublished":"2022-09-19T17:43:03+00:00","dateModified":"2022-09-19T17:43:06+00:00","mainEntityOfPage":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/"},"wordCount":229,"commentCount":0,"publisher":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/#organization"},"image":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903","keywords":["wordpress help","wordpress maintenance service","wordpress support"],"articleSection":["plugins"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/","url":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/","name":"How to add animation based on scroll in wordpress? - WordPress Support","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/#website"},"primaryImageOfPage":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903","datePublished":"2022-09-19T17:43:03+00:00","dateModified":"2022-09-19T17:43:06+00:00","breadcrumb":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#primaryimage","url":"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903","contentUrl":"https:\/\/ps.w.org\/animated-blocks\/assets\/screenshot-2.png?rev=2671903"},{"@type":"BreadcrumbList","@id":"https:\/\/shaplakanon.com\/wpsupport\/how-to-add-animation-based-on-scroll-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shaplakanon.com\/wpsupport\/"},{"@type":"ListItem","position":2,"name":"How to add animation based on scroll in wordpress?"}]},{"@type":"WebSite","@id":"https:\/\/shaplakanon.com\/wpsupport\/#website","url":"https:\/\/shaplakanon.com\/wpsupport\/","name":"WordPress Support","description":"Wordpress Repair, migration, speed optimization","publisher":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shaplakanon.com\/wpsupport\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shaplakanon.com\/wpsupport\/#organization","name":"WordPress Support","url":"https:\/\/shaplakanon.com\/wpsupport\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/logo\/image\/","url":"https:\/\/shaplakanon.com\/wpsupport\/wp-content\/uploads\/sites\/2\/2022\/05\/cropped-logo-9674824.png","contentUrl":"https:\/\/shaplakanon.com\/wpsupport\/wp-content\/uploads\/sites\/2\/2022\/05\/cropped-logo-9674824.png","width":274,"height":55,"caption":"WordPress Support"},"image":{"@id":"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/getwpsupport\/","https:\/\/x.com\/ruhul24"]},{"@type":"Person","@id":"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825","name":"Ruhul Amin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shaplakanon.com\/wpsupport\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28178d347289d520b52ece250f7042df?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28178d347289d520b52ece250f7042df?s=96&d=mm&r=g","caption":"Ruhul Amin"},"sameAs":["https:\/\/shaplakanon.com\/wdc\/"],"url":"https:\/\/shaplakanon.com\/wpsupport\/author\/sabahat\/"}]}},"_links":{"self":[{"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/posts\/1872"}],"collection":[{"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/comments?post=1872"}],"version-history":[{"count":1,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/posts\/1872\/revisions"}],"predecessor-version":[{"id":1873,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/posts\/1872\/revisions\/1873"}],"wp:attachment":[{"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/media?parent=1872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/categories?post=1872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shaplakanon.com\/wpsupport\/wp-json\/wp\/v2\/tags?post=1872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}