{"id":54,"date":"2023-08-12T11:02:12","date_gmt":"2023-08-12T08:02:12","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=54"},"modified":"2024-02-02T09:43:11","modified_gmt":"2024-02-02T07:43:11","slug":"what-is-the-viewport-control","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/","title":{"rendered":"What is the Viewport Control?"},"content":{"rendered":"\n<p>The <strong>Viewport Control<\/strong> is a dual-slider control that lets you define viewport starting and ending points for scrolling effects.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Use Motion Effects Viewport Settings in Elementor\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/0pjPb8orwXM?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<p>The viewport is the user\u2019s visible area of a web page. This visible area varies in size by device.<\/p>\n\n\n\n<p>When scrolling down, each element enters the viewport at the bottom of the screen. When an element first comes into view from the bottom of the viewport, that represents 0 percentage from the bottom. As it scrolls more into view, the percentage of its place in the viewport changes. When the vertical middle of the element is in the center of the viewport, it is at 50%.<\/p>\n\n\n\n<p>If the <em>Viewport<\/em> control is set at 0 Bottom and 100 Top, then the motion will begin when the element first enters the user\u2019s viewport at the bottom of the screen, and will stop when the element exits the viewport.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"312\" height=\"114\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\" alt=\"\" class=\"wp-image-2144\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg 312w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100-300x110.jpg 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/figure>\n\n\n\n<p>If set to 30 Bottom and 65 Top, the motion will begin when the element has entered and reached 30% of the viewport, and will end when it has reached 65% of the viewport.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"297\" height=\"112\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport3065.jpg\" alt=\"\" class=\"wp-image-2145\" \/><\/figure>\n\n\n\n<p>If using a motion effect such as <em>Transparency<\/em> &gt; <em>Fade Out In<\/em>, the effect would be fully visible at 0%, would begin to fade out when the element reaches 30% of the viewport, would be fully invisible when it reaches 65%, and then would begin to fade back in at 65% of the viewport, until it reaches full visibility by the time it exits the viewport.<\/p>\n\n\n\n<p><em>Fade In Out<\/em> would be just the opposite. When the element first enters the viewport at 0%, it would be hidden. When the element reaches 30% of the viewport, it would begin to fade in, becoming more and more visible until it reaches maximum visibility at 65%. At 65% it will then begin to fade back out until it is completely hidden again by the time it leaves the viewport.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Define scrolling effects start and end points with Viewport Control<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65b0f1b236b5215814bb9fb8"],"footnotes":""},"categories":[1439],"tags":[],"class_list":["post-54","post","type-post","status-publish","format-standard","hentry","category-basic-functionality"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is the Viewport Control? | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about What is the Viewport Control? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the Viewport Control? | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about What is the Viewport Control? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-12T08:02:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-02T07:43:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"312\" \/>\n\t<meta property=\"og:image:height\" content=\"114\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\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:\/\/elementor.com\/help\/what-is-the-viewport-control\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"What is the Viewport Control?\",\"datePublished\":\"2023-08-12T08:02:12+00:00\",\"dateModified\":\"2024-02-02T07:43:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\"},\"wordCount\":314,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\",\"articleSection\":[\"Basic functionality\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\",\"url\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\",\"name\":\"What is the Viewport Control? | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\",\"datePublished\":\"2023-08-12T08:02:12+00:00\",\"dateModified\":\"2024-02-02T07:43:11+00:00\",\"description\":\"Learn everything about What is the Viewport Control? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg\",\"width\":312,\"height\":114},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Basic functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"What is the Viewport Control?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is the Viewport Control? | Elementor","description":"Learn everything about What is the Viewport Control? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/what-is-the-viewport-control\/","og_locale":"en_US","og_type":"article","og_title":"What is the Viewport Control? | Elementor","og_description":"Learn everything about What is the Viewport Control? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/","og_site_name":"Help","article_published_time":"2023-08-12T08:02:12+00:00","article_modified_time":"2024-02-02T07:43:11+00:00","og_image":[{"width":312,"height":114,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg","type":"image\/jpeg"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"What is the Viewport Control?","datePublished":"2023-08-12T08:02:12+00:00","dateModified":"2024-02-02T07:43:11+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/"},"wordCount":314,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg","articleSection":["Basic functionality"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/","url":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/","name":"What is the Viewport Control? | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg","datePublished":"2023-08-12T08:02:12+00:00","dateModified":"2024-02-02T07:43:11+00:00","description":"Learn everything about What is the Viewport Control? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/what-is-the-viewport-control\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport0100.jpg","width":312,"height":114},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/what-is-the-viewport-control\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Basic functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/basic-functionality\/"},{"@type":"ListItem","position":5,"name":"What is the Viewport Control?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":38553,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/54\/revisions\/38553"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}