Webflow의 After Effects 및 Lottie 시리즈의 일환으로 After Effects에서 Lottie 애니메이션을 제작했습니다. 이 가이드에서는 Lottie 자산이 보이는 동안 애니메이션을 적용하도록 구성합니다.
우리는 이를 4단계로 달성할 것입니다:
- Lottie 자산 통합
- 스크롤 트리거 설정
- 애니메이션 설정
1. 로티 자산 통합
After Effects에서 Lottie 애니메이션을 내보내고 Webflow 프로젝트에 업로드해야 합니다. Bodymovin을 사용하여 애니메이션을 내보냈습니다. 전체 가이드의 3단계와 4단계에서 이를 수행하는 방법을 알아보세요.
이 과제를 위해서는 3개의 섹션을 준비해야 합니다. 섹션 가이드를 참조하거나 프로젝트를 복제하다.
애니메이션을 찾아서 추가하려면 왼쪽 사이드바의 자산 패널에서 이미지 아이콘을 선택하고 애니메이션을 중앙 섹션에 놓습니다.
훌륭한! 이제 트리거를 설정해 보겠습니다.
2. 스크롤 기반 트리거 설정
트리거를 추가하기 전에 다른 요소가 아닌 애니메이션이 선택되었는지 확인해야 합니다. 우리는 스크롤할 때 이 애니메이션이 발생하기를 원합니다. 오른쪽 사이드바의 상호 작용 패널에서 요소 트리거 메뉴를 열고 보기에서 스크롤하는 동안을 선택합니다.
최종 단계에서 애니메이션을 구성하려면 해당 상호 작용 패널을 유지하세요.
3. 애니메이션 설정
애니메이션을 소개하여 이를 생생하게 구현해 보겠습니다. 아래에 스크롤 시, 선택하다 스크롤 애니메이션 재생 작업 메뉴에서 스크롤 애니메이션 옆에 있는 더하기 기호를 탭하고 드롭다운 메뉴에서 Lottie를 선택하여 초기 작업을 포함합니다.
스크롤 작업 타임라인에서 100%의 애니메이션을 선택하고 아래의 Lottie에서 100%로 조정합니다.
이제 애니메이션은 0%에서 시작하여 보기 밖으로 스크롤될 때 100%에 도달합니다.
실시간 미리보기 모드를 활성화하거나 미리보기에서 작업을 평가하여 스크롤하면서 애니메이션 진행 상황을 관찰할 수 있습니다.
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일
EN 
ZH 
ZH_CN 
KO 
JA