{"id":5697,"date":"2024-04-14T21:03:22","date_gmt":"2024-04-14T13:03:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5697"},"modified":"2024-04-14T21:03:22","modified_gmt":"2024-04-14T13:03:22","slug":"give-motion-to-an-element-during-scrolling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/give-motion-to-an-element-during-scrolling\/","title":{"rendered":"Give motion to an element during scrolling"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p><\/p>\n<p>As a part of our series on After Effects and Lottie in Webflow, we produced a Lottie animation in After Effects. In this guide, we will configure the Lottie asset to animate while it&#8217;s visible.<\/p>\n<p>We will achieve this in 4 phases:<\/p>\n<ol>\n<li>Incorporate the Lottie asset<\/li>\n<li>Establish the scroll-trigger<\/li>\n<li>Set up the animation\n<\/li>\n<\/ol>\n<h2>1. Incorporate the Lottie asset<\/h2>\n<p>You will have to export your Lottie animation from After Effects and upload it to your Webflow project. We exported the animation using Bodymovin. Find out how to accomplish this in steps 3 and 4 of our full guide.\u00a0<\/p>\n<p>For this assignment, you will need to prepare 3 sections \u2014 refer to our Section guide or <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Animate-while-scrolling\">clone the project<\/a>.<\/p>\n<p>To locate and add the animation, select the image icon in the Assets panel from the left sidebar and drop the animation into the central section.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109453\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109453\"><\/iframe><\/div>\n<\/figure>\n<p>Excellent! Now, let&#8217;s establish the trigger.<\/p>\n<h2>2. Set up the scroll-based trigger<\/h2>\n<p>Prior to adding our trigger, we need to ensure the animation (not another element) is chosen. We want this animation to occur as we scroll. From the Interactions panel on the right sidebar, open the Element trigger menu and opt for While scrolling in view.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109394\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109394\"><\/iframe><\/div>\n<\/figure>\n<p>Stay within that Interactions panel to configure the animation in our ultimate step.<\/p>\n<h2>3. Set up the animation<\/h2>\n<p>Let&#8217;s bring this to life by introducing an animation. Under <strong>On scroll<\/strong>, pick <strong>Play Scroll Animation<\/strong> from the Action menu. Beside Scroll Animations, tap on the plus symbol and select Lottie from the dropdown menu to include our initial action.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109342\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109342\"><\/iframe><\/div>\n<\/figure>\n<p>Choose the animation at 100% in the Scroll Actions timeline and below, under Lottie, adjust it to 100%.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109293\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109293\"><\/iframe><\/div>\n<\/figure>\n<p>Now, the animation will commence at 0% and reach 100% by the time it&#8217;s scrolled out of view.\u00a0<\/p>\n<p>You can enable the live preview mode or assess your work in preview to observe the animation progression as you scroll.\u00a0<\/p>\n<pThat's all \u2014 you have successfully crafted a scroll-based Lottie animation in the Webflow designer. Kudos!\n<\/div>\n","protected":false},"excerpt":{"rendered":"As a part of our series on After Effects and Lottie in Webflow, we produced a Lottie animation&hellip;","protected":false},"author":2,"featured_media":5698,"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-5697","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\/5697","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=5697"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5698"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}