{"id":119,"date":"2018-01-17T06:54:44","date_gmt":"2018-01-17T06:54:44","guid":{"rendered":"http:\/\/loftocean.com\/doc\/loftloader\/?page_id=119"},"modified":"2022-11-29T05:14:53","modified_gmt":"2022-11-29T05:14:53","slug":"enable-smooth-page-transition","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/smooth-page-transition\/enable-smooth-page-transition\/","title":{"rendered":"Enable Smooth Page Transition"},"content":{"rendered":"

Click on the Smooth Page Transition<\/strong> section, then navigate to General<\/strong> sub section, you can find the option to enable the “Smooth Page Transition” <\/strong>feature.<\/p>\n

\"\"<\/p>\n

After you enable the Smooth Page Transition<\/strong> feature, when you click an internal link and leave the current page, the loader will appear with animation again<\/span>, to fulfil the blank between pages.<\/p>\n

Please check this demo site to preview the feature: http:\/\/demo.loftocean.com\/loftloader-transition\/<\/a><\/p>\n

<\/p>\n

By default, only the background<\/span> will show immediately when clicking an internal link. If you want to show other elements (loader\/message\/progress bar), please enable “Show all elements when leaving the current page<\/strong>“<\/span> option. This option is newly added since version 2.1.<\/p>\n

\"\"<\/p>\n

Internal Links:<\/span> they are links that go from one page on a domain to a different page on the same domain.<\/div>\n
Please note:<\/span> this feature only works when clicking an internal < a > link. This feature cannot be<\/strong> triggered when clicking on a JavaScript-driven < button >.<\/p>\n

Since each website may use JavaScript-driven buttons to achieve different goals (such as clicking the button to pop up a subscription form or banner ad, or refreshing only a part of a page via AJAX, etc.), it is very complicated to detect if a button is used to link to another internal page of a website.<\/p>\n<\/div>\n

Please note:<\/span> to get the best result of this feature, we suggest:<\/p>\n

    \n
  1. Use the same loader<\/strong> on one site: Do not<\/span> enable \u201cAny Page Extension\u201d<\/strong> and use different loader shortcodes for different pages on one site.<\/li>\n
  2. Choose to display the loader sitewide<\/strong>: every page\/post on your site.<\/li>\n
  3. It would be better not to<\/strong> use a semi-transparent loader background.<\/li>\n<\/ol>\n

    And please note:<\/span> this feature WILL NOT<\/strong> work for the situations listed below:<\/p>\n

      \n
    • When choose to display the pre-loader \u201cOnce Per Session\u201d<\/strong>.<\/li>\n
    • When open the link in a new<\/strong> tab\/window.<\/li>\n
    • When a page uses LoftLoader shortcodes (with \u201cAny Page Extension\u201d<\/strong> enabled).<\/li>\n
    • When a page\/post doesn\u2019t have a pre-loader according to your \u201cDisplay On\u201d<\/strong> settings.<\/li>\n
    • When clicking on a JavaScript-driven button (<button>).<\/li>\n<\/ul>\n

      Please note:<\/span> the options in the Smooth Page Transition section<\/strong> only work on front end. It means when you change the settings, nothing will happen in the preview area. Save the changes you have made, they will be applied to your site. Please remember to clear your site cache and browser cache<\/strong> before checking your front-end.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Click on the Smooth Page Transition section, then navigate to General sub section, you can find the option to enable the “Smooth Page Transition” feature. After you enable the Smooth Page Transition feature, when you click an internal link and leave the current page, the loader will appear with animation again, to fulfil the blank […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":117,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-119","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/119","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=119"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/119\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/119\/revisions\/783"}],"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=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}