![64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0 lfult2sxas0d_4hnrvsl2duzgfcupiie](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0lfult2sxas0d_4hnrvsl2duzgfcupiie.gif)
Webflow 내의 After Effects 및 Lottie를 다루는 교육 커리큘럼 내에서 원이 여러 개의 작은 원으로 확장되는 모습을 보여주는 매력적인 애니메이션이 제작되었습니다. 튜토리얼은 마우스 클릭이나 탭 시 활성화되도록 애니메이션을 구성하는 과정을 안내합니다.
우리는 3가지 주요 단계로 절차를 진행할 것입니다:
- Lotie 애니메이션 삽입
- 트리거 설정
- 애니메이션 준비
적극적으로 참여하려면 자유롭게 이 프로젝트 복제.
Lotie 애니메이션 삽입
![64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvnipv30i4qemkrn6m1jonsz8vrc1kupdmyaug2yjno_y2zmpukp6s1xajuiubitz8gmdojeud7cp05u q0fkletenl2gg_fuglv4asakuqbsinfnq-tk](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvnipv30i4qemkrn6m1jonsz8vrc1kupdmyaug2yjno_y2zmpukp6s1xajuiubitz8gmdojeud7cp05uq0fkletenl2gg_fuglv4asakuqbsinfnq-tk.gif)
![64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoaldziz_qc4dia1iylgofkyyrthi5nq128vyh-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuv seeyaf5o2ojyjfqnaromo2yempxrxpqh0dr](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoaldziz_qc4dia1iylgofkyyrthi5nq128vyh-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuvseeyaf5o2ojyjfqnaromo2yempxrxpqh0dr.gif)
![64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zy-3yq_a7jyqb-dj1x0r4wnnhuy-vmeb73pmvnx fpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zy-3yq_a7jyqb-dj1x0r4wnnhuy-vmeb73pmvnxfpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9.gif)
트리거 구성
![64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9heu53qv2jbk6ff9hr9ns4vkgavp7sefn66fcnnyg2pntwbbeyyc4hjvcobg8hrzsvyhulduboo- tnw9oke4reqwtdplcjor-kca7x5s6fyiq-1f0x](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9heu53qv2jbk6ff9hr9ns4vkgavp7sefn66fcnnyg2pntwbbeyyc4hjvcobg8hrzsvyhulduboo-tnw9oke4reqwtdplcjor-kca7x5s6fyiq-1f0x.png)
![64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00vrtmehrsbcmttj6njuvpa2q9ffl-vfok3goldlpobcw yjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00vrtmehrsbcmttj6njuvpa2q9ffl-vfok3goldlpobcwyjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u.gif)
애니메이션 구성
![64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzokixd58t9vq_t6t2ntbjeqwh4dqyk9dc51zodwia9mfu_lbvvtiylyqyjslnilemmgtok7 zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzokixd58t9vq_t6t2ntbjeqwh4dqyk9dc51zodwia9mfu_lbvvtiylyqyjslnilemmgtok7zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax.gif)
![64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyav0 v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1](https://webflow-s3.tenten.co/2024/04/64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyavyv0v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1.gif)
Ewan Mak의 최신 게시물 (모두 보기)
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일