{"id":7476,"date":"2022-02-21T10:38:19","date_gmt":"2022-02-21T10:38:19","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7476"},"modified":"2023-02-21T09:41:07","modified_gmt":"2023-02-21T09:41:07","slug":"create-an-exit-scrolling-text-effect","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/","title":{"rendered":"Create an Exit Scrolling Text Effect"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7476\" class=\"elementor elementor-7476\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-78be24a3 thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78be24a3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-53d80156\" data-id=\"53d80156\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-44cf3f79 elementor-widget elementor-widget-video\" data-id=\"44cf3f79\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/7onDTz84YK4&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-70f78820 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"70f78820\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2ccc1acd\" data-id=\"2ccc1acd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3a23d0d1 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"3a23d0d1\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9751\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9751\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9752\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9752\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9751\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9751\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9751\" tabindex=\"0\" hidden=\"false\"><p>In this tips &amp; tricks tutorial we are going to learn how to apply a subtle but effective exit effect to our text when the user scrolls down the page.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Using the heading widget<br \/>\u2714\ufe0e Using the animated headline widget<br \/>\u2714\ufe0e Configuring scrolling effects<br \/>\u2714\ufe0e Using the navigator<br \/>\u2714\ufe0e And much more!<\/p><p>Helpful links:<br \/><a href=\"https:\/\/youtu.be\/_NzvbJDyC48\" target=\"_blank\" rel=\"noopener\">Flashing images tutorial<\/a><br \/><a href=\"https:\/\/youtu.be\/CjdFxKPPikU\" target=\"_blank\" rel=\"noopener\">How to configure global fonts &amp; colors<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9752\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9752\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9752\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In this tips &amp; tricks tutorial we\u2019re going to apply this subtle but effective exit effect to our text when the user scrolls down the page.<\/p><p>We\u2019ll be using the design from our \u2018Flashing Images\u2019 tutorial, to view this video check out the link in the description below.<\/p><p>To get started, let\u2019s first open up the navigation and lock it to the side of our screen.<\/p><p>We\u2019ll hide the flashing images, so that we can focus on the text.<\/p><p>Let\u2019s delete the headings we\u2019ve previously created, and start from scratch to fully understand how to create this effect.<br \/>Add in a new one column section first\u2026and then apply some padding.<\/p><p>Drop in the heading widget\u2026and then update the name of this widget within the navigation by double clicking it\u2026and also the section itself. Doing so will enable us to navigate with ease through this task.<\/p><p>OK, let now set up our heading which will provide a great starting point for the remainder of our titles.<\/p><p>Update the title itself\u2026and then align to the center.<\/p><p>Open the style tab\u2026and as you can see, our title in being styled by our global settings which we\u2019ve previously set up. If you would like to learn more about setting your global typography and colors, check out the link below.<\/p><p>In the advanced tab next, we\u2019ll set the z-index to 1, which will ensure this text appears above our flashing images, when we switch them back on.<\/p><p>Now open up the motion effects tab and enable scrolling effects. Before we configure this, please note you are able to specify which devices these effects apply to and also where the effects are relative to. We\u2019ll leave them all as default for our design, but be sure to experiment to find the right combination for your needs.<\/p><p>With the scrolling effects switched on we\u2019ll enable vertical scroll\u2026amend the speed to give a slight acceleration to our text\u2026and then the viewport. By setting our percentages like this, we ensure that the effect will take place in a short period of time just before we exit the viewport.<\/p><p>Now enable scale\u2026and again configure the speed\u2026and the viewport. Feel free to adjust these values according to your requirements, just make sure they are at least above 60% to take effect on scroll exit.<\/p><p>With the first title created, let\u2019s right click it and duplicate.<\/p><p>Update the name within the navigator first\u2026and then the title itself.<\/p><p>In the style tab, we\u2019ll set the global typography.<br \/>Duplicate the second title\u2026update the name in the navigator\u2026the title itself\u2026change the style\u2026and this time in the advanced tab, we\u2019ll adjust the margin to better position this title.<\/p><p>The next heading is slightly different, because we\u2019re going to use the animated headline widget. This is perfect when you want to apply different text styles in one heading.<\/p><p>Let\u2019s drop this in\u2026and then amend the name of this widget.<\/p><p>We\u2019ll first open the style tab to make some adjustments, so that we\u2019re able to see our changes in real time.<\/p><p>Set the color\u2026and width for the shape. Then for the headline, the color\u2026and typography. Finally the color and typography for the animated text.<\/p><p>Now switch back to the content tab and set the shape\u2026remove the before text\u2026add in the text for highlighted text\u2026the text for after text\u2026and switch the loop off.<\/p><p>Finally now in the advanced tab\u2026we\u2019ll adjust the margin\u2026add a z-index\u2026and switch on the scrolling effects.<\/p><p>Just like before we\u2019ll enable the vertical scroll\u2026set the speed\u2026and the viewport. Then enable the scale as well\u2026set the speed\u2026and the viewport.<\/p><p>OK, great! This is really coming together now.<\/p><p>For the remaining headings we\u2019ll selectively duplicate the ones which are most similar to ensure the most efficiency.<\/p><p>Let\u2019s duplicate the \u2018comfortable\u2019 heading\u2026reposition..and rename\u2026then update in the content tab.<\/p><p>Next, duplicate the \u2018fashionable\u2019 heading. Then rename\u2026and reposition just like before.<\/p><p>Duplicate the last heading\u2026update the navigator name\u2026and the title. This time we\u2019ll amend the typography using the global styles\u2026and then add in some margin to position this correctly.<\/p><p>One last one now. Duplicate the \u2018clothing\u2019 heading\u2026update the name and reposition. Now update the title\u2026and the typography.<\/p><p>To finish our design, we just need to add in our button.<\/p><p>Drop in the button widget\u2026amend the text\u2026and then the alignment.<\/p><p>Within the style tab we\u2019ll set the font\u2026font size\u2026line height\u2026text color\u2026button color\u2026the text hover color\u2026the button hover color\u2026hover animation\u2026border type\u2026border width\u2026border color\u2026and padding.<\/p><p>Then in the advanced tab adjust the padding\u2026and set the z-index to 1 to match the headings.<\/p><p>Let\u2019s now save our changes and preview what we\u2019ve created.<\/p><p>And there we have it, a simple solution to creating an effective text exit animation when a user scrolls down a page.<\/p><p>These effects can be applied to a variety of designs, and work well when combined with additional scrolling effects.<\/p><p>Be sure to experiment and share your creations with us.<\/p><p>Thank you for watching, like and subscribe for more tips and tricks tutorials and let us know in the comments below, what you\u2019d like to see in upcoming videos.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tips &amp; tricks tutorial we are going to learn how to apply a subtle but effective exit effect to our text when the user scrolls down the page. The tutorial will cover: \u2714\ufe0e Using the heading widget \u2714\ufe0e Using the animated headline widget \u2714\ufe0e Configuring scrolling effects \u2714\ufe0e Using the [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":7477,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-7476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create an Exit Scrolling Text Effect - Academy<\/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:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an Exit Scrolling Text Effect - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tips &amp; tricks tutorial we are going to learn how to apply a subtle but effective exit effect to our text when the user scrolls down the page. The tutorial will cover: \u2714\ufe0e Using the heading widget \u2714\ufe0e Using the animated headline widget \u2714\ufe0e Configuring scrolling effects \u2714\ufe0e Using the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-21T10:38:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:41:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create an Exit Scrolling Text Effect - Academy","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\/academy\/create-an-exit-scrolling-text-effect\/","og_locale":"en_US","og_type":"article","og_title":"Create an Exit Scrolling Text Effect - Academy","og_description":"Overview Transcript Overview In this tips &amp; tricks tutorial we are going to learn how to apply a subtle but effective exit effect to our text when the user scrolls down the page. The tutorial will cover: \u2714\ufe0e Using the heading widget \u2714\ufe0e Using the animated headline widget \u2714\ufe0e Configuring scrolling effects \u2714\ufe0e Using the [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/","og_site_name":"Academy","article_published_time":"2022-02-21T10:38:19+00:00","article_modified_time":"2023-02-21T09:41:07+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"Create an Exit Scrolling Text Effect","datePublished":"2022-02-21T10:38:19+00:00","dateModified":"2023-02-21T09:41:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/"},"wordCount":998,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/","url":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/","name":"Create an Exit Scrolling Text Effect - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png","datePublished":"2022-02-21T10:38:19+00:00","dateModified":"2023-02-21T09:41:07+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Exit-Scrolling-text-effect-v02.png","width":1920,"height":1080,"caption":"Exit Scrolling Text Effect"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-an-exit-scrolling-text-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create an Exit Scrolling Text Effect"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7476"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7476\/revisions"}],"predecessor-version":[{"id":9331,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7476\/revisions\/9331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7477"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}