{"id":6775,"date":"2024-04-14T18:04:43","date_gmt":"2024-04-14T10:04:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6775"},"modified":"2024-04-14T18:04:43","modified_gmt":"2024-04-14T10:04:43","slug":"page-loading-transition","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/page-loading-transition\/","title":{"rendered":"Page loading transition"},"content":{"rendered":"\n
\n

Within the scope of our series concerning After Effects and Lottie in Webflow, we devised a page load transition in After Effects employing the Bodymovin plug-in. This guide will walk you through the process of integrating it into our project so it displays on the screen before vanishing once the page completes loading.<\/p>\n

Topics covered in this instructional:<\/strong><\/p>\n

    \n
  1. Incorporate the Lottie transition into our project<\/li>\n
  2. Establish the trigger<\/li>\n
  3. Configure the transition to fade away\n<\/li>\n<\/ol>\n

    Integrate the Lottie transition into our project<\/h2>\n

    You must export your Lottie transition from After Effects and upload it to your Webflow project. We exported the transition using Bodymovin. Discover how to execute this in steps 3 and 4 of our comprehensive tutorial.\u00a0<\/p>\n

    To locate and insert the transition, tap the image icon in the Assets panel located in the left toolbar and drop the transition at the top of the page.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    To loop the transition, enable Loop in the Lottie Animation Settings popup.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Close the settings window and within the Style panel on the right, pick Fixed from the dropdown list beside Position. This will dictate the transition’s position on the screen.\u00a0<\/p>\n

    For Size, assign 100% as both the width and height.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Within Position, allocate a high number to the z-index (the stacking order) such as 9999. This ensures the transition always sits on top.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    \u200d<\/p>\n

    If your transition features a transparent backdrop, you may additionally incorporate a background color.\u00a0<\/p>\n

    \n
    \"Step<\/div>\n<\/figure>\n

    Great! Let\u2019s proceed with configuring the trigger to conceal the transition upon page completion of loading.<\/p>\n

    Establish the trigger<\/h2>\n

    In the Interactions panel, hit the plus symbol adjacent to Page trigger and select Page load from the dropdown list.\u00a0<\/p>\n

    \n
    \"Step<\/div>\n<\/figure>\n

    Beneath When page finishes loading, select Initiate an Animation from the Action menu.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    To maintain organization, click the plus symbol beside Timed Animations and label your animation (e.g., Page loader).\u00a0<\/p>\n

    Remain within the Interactions panel for the subsequent step where we ascertain the transition conceals upon page load completion.<\/p>\n

    Configure the transition to vanish<\/h2>\n

    Select the plus symbol next to Timed Actions in the Interactions panel and opt for Hide\/Show from the dropdown list.<\/p>\n

    \n
    \"Step<\/div>\n<\/figure>\n

    Beneath Hide\/Show, configure the Display setting to none.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    <\/p>\n

    In the Timed Actions segment, tap 0.00 second in the timeline and select Opacity from the dropdown list.\u00a0<\/p>\n

    \n
    \"Step<\/div>\n<\/figure>\n

    Adjust the Opacity to 0 and Duration to 1.5 seconds to gently fade out the transition.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    In the Timed Actions segment, press the Lottie Animation at 1.5 seconds on the timeline and within Hide\/Show, set the Display to none.<\/p>\n

    \n
    \"Step<\/div>\n<\/figure>\n

    Review your adjustments in preview mode \u2014 fine-tune your settings and tailor the transition to align perfectly with the page design you’re crafting.<\/p>\n

    \u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a sequenced animation that animates multiple elements once a page loads.","protected":false},"author":2,"featured_media":6776,"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-6775","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\/6775","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=6775"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6776"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}