{"id":4483,"date":"2026-02-25T08:34:27","date_gmt":"2026-02-25T08:34:27","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/"},"modified":"2026-02-25T08:34:27","modified_gmt":"2026-02-25T08:34:27","slug":"spiral-scrollytelling-css-sibling-index","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/","title":{"rendered":"Spiral Scrollytelling in CSS With sibling-index()"},"content":{"rendered":"<article>\n<h2>Introduction to Spiral Scrollytelling<\/h2>\n<p>Scrollytelling has emerged as a powerful storytelling technique in web development, allowing developers to create interactive narratives that engage users as they scroll through content. One creative approach to scrollytelling is the spiral effect, where your content follows a circular path, capturing attention in a unique manner. In this post, we will explore how to implement spiral scrollytelling using the <code>sibling-index()<\/code> function in CSS.<\/p>\n<h2>What is sibling-index()?<\/h2>\n<p>The <code>sibling-index()<\/code> function is a relatively new addition to CSS, designed to simplify the selection of sibling elements based on their position in the DOM. This function can be particularly useful for implementing complex animations and transitions, such as the spiral effect we will be creating.<\/p>\n<h2>Key Concepts of Spiral Scrollytelling<\/h2>\n<p>Before diving into the code, let\u2019s clarify the key concepts you&#8217;ll need to understand:<\/p>\n<ul>\n<li><strong>Scrollytelling:<\/strong> A method of storytelling that incorporates scrolling as a mechanism to reveal content.<\/li>\n<li><strong>CSS Transitions and Animations:<\/strong> Techniques used to create smooth changes in styles and effects.<\/li>\n<li><strong>Sibling Elements:<\/strong> Elements that share the same parent in the DOM hierarchy.<\/li>\n<\/ul>\n<h2>Step-by-Step Implementation<\/h2>\n<h3>1. Setting Up Your HTML Structure<\/h3>\n<p>Begin by creating a simple HTML structure that will house your scrollytelling content. Here\u2019s an example:<\/p>\n<pre><code>&lt;div class=&quot;scrollytelling-container&quot;&gt;\n    &lt;div class=&quot;scroll-item&quot;&gt;Item 1&lt;\/div&gt;\n    &lt;div class=&quot;scroll-item&quot;&gt;Item 2&lt;\/div&gt;\n    &lt;div class=&quot;scroll-item&quot;&gt;Item 3&lt;\/div&gt;\n    &lt;div class=&quot;scroll-item&quot;&gt;Item 4&lt;\/div&gt;\n    &lt;div class=&quot;scroll-item&quot;&gt;Item 5&lt;\/div&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n<h3>2. Adding CSS Styles<\/h3>\n<p>Next, we will add CSS styles to create the spiral effect. Below is an example of how to layout your CSS:<\/p>\n<pre><code>.scrollytelling-container {\n    position: relative;\n    overflow: hidden;\n    height: 100vh;\n  }\n\n  .scroll-item {\n    position: absolute;\n    transition: transform 0.5s;\n  }\n\n  .scroll-item:nth-child(1) { transform: rotate(0deg) translateY(0); }\n  .scroll-item:nth-child(2) { transform: rotate(72deg) translateY(100px); }\n  .scroll-item:nth-child(3) { transform: rotate(144deg) translateY(200px); }\n  .scroll-item:nth-child(4) { transform: rotate(216deg) translateY(300px); }\n  .scroll-item:nth-child(5) { transform: rotate(288deg) translateY(400px); }<\/code><\/pre>\n<h3>3. Implementing Scrolling Behavior<\/h3>\n<p>To complete the spiral scrollytelling effect, we need to add JavaScript that triggers the CSS transformations based on the scroll position. You can use the following JavaScript code:<\/p>\n<pre><code>window.addEventListener(&quot;scroll&quot;, function() {\n    const scrollItems = document.querySelectorAll(&quot;.scroll-item&quot;);\n    const scrollY = window.scrollY;\n\n    scrollItems.forEach((item, index) =&gt; {\n      item.style.transform = `rotate(${index * 72 + scrollY\/10}deg) translateY(${index * 100}px)`;\n    });\n  });<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>What browsers support sibling-index()?<\/h3>\n<p>The <code>sibling-index()<\/code> function is supported in modern browsers, but be sure to check compatibility if you\u2019re targeting a wide audience.<\/p>\n<h3>Can I use this technique for other shapes?<\/h3>\n<p>Absolutely! You can modify the rotation angles and translate values to create different shapes and animations beyond the spiral effect.<\/p>\n<h3>What tools can help me optimize my CSS?<\/h3>\n<p>You can use the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> on WebToolsLab to optimize and minimize your CSS code for better performance.<\/p>\n<h2>Conclusion<\/h2>\n<p>Spiral scrollytelling is a captivating technique that can enhance user engagement on your website. By leveraging the <code>sibling-index()<\/code> function in CSS, you can create dynamic and visually appealing content. Experiment with the provided code and optimize your project using tools from <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> to take your web development skills to new heights!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.<\/p>\n","protected":false},"author":1,"featured_media":2856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-4483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-25T08:34:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Spiral Scrollytelling in CSS With sibling-index()\",\"datePublished\":\"2026-02-25T08:34:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/\"},\"wordCount\":391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/\",\"name\":\"Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"datePublished\":\"2026-02-25T08:34:27+00:00\",\"description\":\"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246144776\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/spiral-scrollytelling-css-sibling-index\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spiral Scrollytelling in CSS With sibling-index()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab","description":"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.","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:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/","og_locale":"en_US","og_type":"article","og_title":"Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab","og_description":"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.","og_url":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/","og_site_name":"WebToolsLab","article_published_time":"2026-02-25T08:34:27+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Spiral Scrollytelling in CSS With sibling-index()","datePublished":"2026-02-25T08:34:27+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/"},"wordCount":391,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/","url":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/","name":"Spiral Scrollytelling in CSS With sibling-index() - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","datePublished":"2026-02-25T08:34:27+00:00","description":"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","width":1820,"height":1024,"caption":"1752246144776"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/spiral-scrollytelling-css-sibling-index\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Spiral Scrollytelling in CSS With sibling-index()"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to create engaging spiral scrollytelling effects in CSS using sibling-index(). Step-by-step guide and code examples included.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/4483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=4483"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/4483\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2856"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=4483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=4483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=4483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}