{"id":5906,"date":"2024-04-14T12:44:09","date_gmt":"2024-04-14T04:44:09","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5906"},"modified":"2024-04-14T12:44:09","modified_gmt":"2024-04-14T04:44:09","slug":"construct-a-scroll-progression-indicator","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/construct-a-scroll-progression-indicator\/","title":{"rendered":"Construct a scroll progression indicator"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>A scroll progression indicator assists users in tracing their position on a page.\u00a0<\/p>\n<p><strong>In this tutorial:<\/strong><\/p>\n<ol>\n<li>Formulate the advancement bar<\/li>\n<li>Establish a scroll trigger<\/li>\n<li>Organize a scroll animation<\/li>\n<li>Cover alteration origin<\/li>\n<\/ol>\n<h2>Formulate the advancement bar<\/h2>\n<ol>\n<li>Generate a <strong>Div block<\/strong><\/li>\n<li>Label it<\/li>\n<li>Set the backdrop color for better visibility<\/li>\n<li>Place it in your desired location<\/li>\n<li>Assign it a width of 100%<\/li>\n<li>Allocate a height (e.g., 10 pixels)<\/li>\n<li>Secure its placement to the upper left corner of the viewport<\/li>\n<li>Assign a sufficiently high z-index value to ensure it remains on top\u00a0<\/li>\n<\/ol>\n<h2>Establish a scroll trigger<\/h2>\n<p>From the <strong>Page trigger <\/strong>menu within the <strong>Interactions<\/strong> panel, opt for <strong>While page is scrolling<\/strong><\/p>\n<p>That\u2019s all there is to it! So straightforward.<\/p>\n<h2>Organize a scroll animation<\/h2>\n<ol>\n<li>Within the <strong>On scroll<\/strong> menu in the <strong>Interactions<\/strong> panel, select <strong>Play scroll animation<\/strong><\/li>\n<li>Adjacent to <strong>Scroll Animations<\/strong>, click the addition symbol<\/li>\n<li>Name it (e.g., \u201cscroll progression\u201d)<\/li>\n<li>Ensure your element is chosen and click on the addition symbol at 0% and choose <strong>Scale<\/strong> from the list<\/li>\n<li>Beneath <strong>Scale<\/strong>, modify the x-axis position to 0<\/li>\n<li>Click the advancement bar at 100% and beneath <strong>Scale<\/strong> switch the x-axis position to 1<\/li>\n<\/ol>\n<h2>Cover alteration origin<\/h2>\n<ol>\n<li>In the <strong>Style<\/strong> panel, scroll to <strong>Effects<\/strong><\/li>\n<li>Press the <strong>Additional options<\/strong> icon (ellipsis) beside <strong>2D &amp; 3D transforms<\/strong><\/li>\n<li>Assign the <strong>Origin<\/strong> to the left<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a horizontal progress indicator that scales as visitors scroll down the page.","protected":false},"author":2,"featured_media":5907,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-5906","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5906"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5906\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5907"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}