{"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\/ko\/create-an-animated-after-effects-composition-to-trigger-on-click\/","title":{"rendered":"\ud074\ub9ad \uc2dc \ud2b8\ub9ac\uac70\ub418\ub294 \uc560\ub2c8\uba54\uc774\uc158 After Effects \ucef4\ud3ec\uc9c0\uc158 \ub9cc\ub4e4\uae30"},"content":{"rendered":"<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_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0 lfult2sxas0d_4hnrvsl2duzgfcupiie\"><\/div>\n<\/figure>\n<p>Webflow \ub0b4\uc758 After Effects \ubc0f Lottie\ub97c \ub2e4\ub8e8\ub294 \uad50\uc721 \ucee4\ub9ac\ud058\ub7fc \ub0b4\uc5d0\uc11c \uc6d0\uc774 \uc5ec\ub7ec \uac1c\uc758 \uc791\uc740 \uc6d0\uc73c\ub85c \ud655\uc7a5\ub418\ub294 \ubaa8\uc2b5\uc744 \ubcf4\uc5ec\uc8fc\ub294 \ub9e4\ub825\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud29c\ud1a0\ub9ac\uc5bc\uc740 \ub9c8\uc6b0\uc2a4 \ud074\ub9ad\uc774\ub098 \ud0ed \uc2dc \ud65c\uc131\ud654\ub418\ub3c4\ub85d \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\uc131\ud558\ub294 \uacfc\uc815\uc744 \uc548\ub0b4\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\ub9ac\ub294 3\uac00\uc9c0 \uc8fc\uc694 \ub2e8\uacc4\ub85c \uc808\ucc28\ub97c \uc9c4\ud589\ud560 \uac83\uc785\ub2c8\ub2e4:<\/p>\n<ol>\n<li>Lotie \uc560\ub2c8\uba54\uc774\uc158 \uc0bd\uc785\u00a0<\/li>\n<li>\ud2b8\ub9ac\uac70 \uc124\uc815\u00a0<\/li>\n<li>\uc560\ub2c8\uba54\uc774\uc158 \uc900\ube44<\/li>\n<\/ol>\n<p>\uc801\uadf9\uc801\uc73c\ub85c \ucc38\uc5ec\ud558\ub824\uba74 \uc790\uc720\ub86d\uac8c <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Click-based-animation\">\uc774 \ud504\ub85c\uc81d\ud2b8 \ubcf5\uc81c<\/a>.<\/p>\n<pUnderstand? Excellent! Let's commence.<\/p>\n<h2>Lotie \uc560\ub2c8\uba54\uc774\uc158 \uc0bd\uc785<\/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_y2zmpukp6s1xajuiubitz8gmdojeud7cp05u q0fkletenl2gg_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-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuv seeyaf5o2ojyjfqnaromo2yempxrxpqh0dr\"><\/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-vmeb73pmvnx fpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9\"><\/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>\ud2b8\ub9ac\uac70 \uad6c\uc131<\/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-vfok3goldlpobcw yjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u\"><\/div>\n<\/figure>\n<h2>\uc560\ub2c8\uba54\uc774\uc158 \uad6c\uc131<\/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_lbvvtiylyqyjslnilemmgtok7 zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax\"><\/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-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyav0 v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1\"><\/div>\n<\/figure>\n<p><\/p>\n<pImpressive work!\n<\/div>","protected":false},"excerpt":{"rendered":"\ub9c8\uc6b0\uc2a4 \ud074\ub9ad\uc774\ub098 \ud0ed\uc73c\ub85c \ub85c\ub4dc\ud560 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.","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\/ko\/wp-json\/wp\/v2\/posts\/5917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/comments?post=5917"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/posts\/5917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/media\/5918"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/media?parent=5917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/categories?post=5917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/ko\/wp-json\/wp\/v2\/tags?post=5917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}