{"id":792,"date":"2022-12-01T09:36:43","date_gmt":"2022-12-01T09:36:43","guid":{"rendered":"https:\/\/loftocean.com\/doc\/loftloader\/?page_id=792"},"modified":"2022-12-01T09:50:29","modified_gmt":"2022-12-01T09:50:29","slug":"when-leaving-current-page","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/smooth-page-transition\/when-leaving-current-page\/","title":{"rendered":"When Leaving Current Page"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Reverse Background Animation Direction When Reappearing:<\/h4>\n\n\n\n<p>When the &#8220;<strong>Smooth Page Transition<\/strong>&#8221; feature is activated, when a page link is clicked, the loader will appear immediately. At this time, the animation that appears in the background of the loader is actually the opposite of the &#8220;background end animation&#8221; you set. For example, if you set the end animation of the loader background to &#8220;Slide Up&#8221;, then when you click on a page link to make the loader reappear, the loading screen background will re-enter the page with a slide down animation.<\/p>\n\n\n\n<p>If you would like to reverse this animation, please go to&nbsp;<strong>Smooth Page Transition<\/strong>&nbsp;&gt;&nbsp;<strong>When Leaving Current Page<\/strong> &gt; Enable the &#8220;Reverse Background Animation Direction when Reappearing&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2210\" height=\"1588\" src=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5.png\" alt=\"\" class=\"wp-image-786\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5.png 2210w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5-300x216.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5-1024x736.png 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5-768x552.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5-1536x1104.png 1536w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-5-2048x1472.png 2048w\" sizes=\"auto, (max-width: 2210px) 100vw, 2210px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Control the Progress Indicator:<\/h4>\n\n\n\n<p>When the &#8220;<strong>Smooth Page Transition<\/strong>&#8221; feature is activated, when jumping between pages of the same website, the loader that the viewer sees is actually displayed in two stages:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stage 1 &#8211; After clicking a page link, the loader appears immediately.<\/li>\n\n\n\n<li>Stage 2 &#8211; After the new page is opened, the loader continues to display.<\/li>\n<\/ol>\n\n\n\n<p>When the loading screen contains any element that shows the loading progress, such as: progress bar, loading percentage, etc., you can set where the loading progress stays when leaving the current page, and how long you want to stay on the current page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2210\" height=\"1588\" src=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6.png\" alt=\"\" class=\"wp-image-787\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6.png 2210w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6-300x216.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6-1024x736.png 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6-768x552.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6-1536x1104.png 1536w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2022\/12\/spt-new-6-2048x1472.png 2048w\" sizes=\"auto, (max-width: 2210px) 100vw, 2210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Reverse Background Animation Direction When Reappearing: When the &#8220;Smooth Page Transition&#8221; feature is activated, when a page link is clicked, the loader will appear immediately. At this time, the animation that appears in the background of the loader is actually the opposite of the &#8220;background end animation&#8221; you set. For example, if you set the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":117,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-792","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":3,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/792\/revisions"}],"predecessor-version":[{"id":799,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/792\/revisions\/799"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/117"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}