{"id":5917,"date":"2024-04-14T20:08:47","date_gmt":"2024-04-14T12:08:47","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5917"},"modified":"2024-04-14T20:08:47","modified_gmt":"2024-04-14T12:08:47","slug":"create-an-animated-after-effects-composition-to-trigger-on-click","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/create-an-animated-after-effects-composition-to-trigger-on-click\/","title":{"rendered":"Create an animated After Effects composition to trigger on click"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p><\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0lfult2sxas0d_4hnrvsl2duzgfcupiie.gif\" title=\"64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0lfult2sxas0d_4hnrvsl2duzgfcupiie\"><\/div>\n<\/figure>\n<p>Within our educational curriculum covering After Effects and Lottie within Webflow, a captivating animation was crafted showcasing a circle expanding into multiple smaller circles. The tutorial will guide you through configuring the animation to activate upon a mouse click or tap.<\/p>\n<p>We shall progress through the procedure in 3 main phases:<\/p>\n<ol>\n<li>Insert the Lottie animation\u00a0<\/li>\n<li>Establish the trigger\u00a0<\/li>\n<li>Prepare the animation<\/li>\n<\/ol>\n<p>To engage actively, feel free to <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Click-based-animation\">duplicate this project<\/a>.<\/p>\n<pUnderstand? Excellent! Let's commence.<\/p>\n<h2>Insert the Lottie Animation<\/h2>\n<pIt is necessary to export the Lottie animation from After Effects and import it into your Webflow project. Learn the process in steps 3 and 4 of our comprehensive instructional guide.\u00a0\n<pInitiate by opening a blank page in the Webflow Designer and adjusting the background color to black at the lower section of the Style panel situated on the right.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvnipv30i4qemkrn6m1jonsz8vrc1kupdmyaug2yjno_y2zmpukp6s1xajuiubitz8gmdojeud7cp05uq0fkletenl2gg_fuglv4asakuqbsinfnq-tk.gif\" title=\"64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvnipv30i4qemkrn6m1jonsz8vrc1kupdmyaug2yjno_y2zmpukp6s1xajuiubitz8gmdojeud7cp05uq0fkletenl2gg_fuglv4asakuqbsinfnq-tk\"><\/div>\n<\/figure>\n<p><\/p>\n<pFor locating and incorporating the expanding Lottie animation, select the picture icon (Assets panel) from the left toolbar and drop the circular animation onto the Canvas.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoaldziz_qc4dia1iylgofkyyrthi5nq128vyh-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuvseeyaf5o2ojyjfqnaromo2yempxrxpqh0dr.gif\" title=\"64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoaldziz_qc4dia1iylgofkyyrthi5nq128vyh-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuvseeyaf5o2ojyjfqnaromo2yempxrxpqh0dr\"><\/div>\n<\/figure>\n<p><\/p>\n<pTo center the circular animation, confirm that the body element is chosen in the Assets panel on the left. Under the Layout segment within the Style panel on the right, set Align and Justify to center.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zy-3yq_a7jyqb-dj1x0r4wnnhuy-vmeb73pmvnxfpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9.gif\" title=\"64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zy-3yq_a7jyqb-dj1x0r4wnnhuy-vmeb73pmvnxfpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9\"><\/div>\n<\/figure>\n<p><\/p>\n<pUpon previewing the page (click on the eye in the top left corner), the animation will play immediately once loaded. This doesn't align with our intention, so we will address this in the subsequent step.\u00a0<\/p>\n<h2>Configure the Trigger<\/h2>\n<pWithin this phase, the objective is to set the animation to activate upon a click instead of commencing automatically when the page loads.\u00a0\u00a0\n<pAhead of inserting the trigger, ensure that the animation is chosen, not another element such as the body.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9heu53qv2jbk6ff9hr9ns4vkgavp7sefn66fcnnyg2pntwbbeyyc4hjvcobg8hrzsvyhulduboo-tnw9oke4reqwtdplcjor-kca7x5s6fyiq-1f0x.png\" title=\"64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9heu53qv2jbk6ff9hr9ns4vkgavp7sefn66fcnnyg2pntwbbeyyc4hjvcobg8hrzsvyhulduboo-tnw9oke4reqwtdplcjor-kca7x5s6fyiq-1f0x\"><\/div>\n<\/figure>\n<p><\/p>\n<pWithin the Interactions panel on the right toolbar, access the Element trigger menu and opt for Mouse click (tap).\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00vrtmehrsbcmttj6njuvpa2q9ffl-vfok3goldlpobcwyjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u.gif\" title=\"64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00vrtmehrsbcmttj6njuvpa2q9ffl-vfok3goldlpobcwyjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u\"><\/div>\n<\/figure>\n<h2>Configure the Animation<\/h2>\n<pWithin the Interactions panel, under On 1st click, opt for Lottie Playback from the Action menu.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzokixd58t9vq_t6t2ntbjeqwh4dqyk9dc51zodwia9mfu_lbvvtiylyqyjslnilemmgtok7zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax.gif\" title=\"64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzokixd58t9vq_t6t2ntbjeqwh4dqyk9dc51zodwia9mfu_lbvvtiylyqyjslnilemmgtok7zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax\"><\/div>\n<\/figure>\n<p><\/p>\n<pAnd there you have it \u2014 mission accomplished! Your Lottie animation will now activate upon a click. Feel free to test it out in the preview mode. Upon loading the page, the animation will remain stationary until activated by a mouse click or tap.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyavyv0v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1.gif\" title=\"64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyavyv0v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1\"><\/div>\n<\/figure>\n<p><\/p>\n<pImpressive work!\n<\/div>\n","protected":false},"excerpt":{"rendered":"Set up an animation to load with a mouse click or tap.","protected":false},"author":2,"featured_media":5918,"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":[290],"tags":[],"class_list":{"0":"post-5917","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5917","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=5917"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5918"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}