Webflow

Webflow용 LottieFiles 앱은 공개 애니메이션과 팀의 비공개 LottieFiles Workspace를 Webflow 디자인 환경 안으로 가져옵니다. 애니메이션을 찾아 사용할 런타임에 맞게 준비하고 페이지에 삽입한 뒤 게시된 결과를 검증하세요.

핵심 워크플로

1. 찾기 - Explore에서 애니메이션을 찾거나 Workspace에서 승인된 버전을 선택합니다.

2. 준비하기 - 필요에 따라 배경, 팔레트, 렌더러, 테마, 하위 애니메이션 또는 상태 머신을 설정합니다.

3. 선택하기 - 애니메이션을 넣거나 고정할 페이지 요소를 선택합니다.

4. 삽입하기 - 네이티브 Webflow Lottie 요소 또는 고급 dotLottie 플레이어를 추가합니다.

5. 미리 보고 게시하기 - 사이트를 게시한 뒤 공개 URL에서 애니메이션을 검증합니다.

애니메이션 원본 선택

• Explore는 공개 LottieFiles 라이브러리입니다. 새로운 모션이 필요할 때 공개 애니메이션을 찾아보세요.

• Workspace에는 워크스페이스, 프로젝트, 컬렉션, 폴더로 정리된 비공개 및 팀 에셋이 있습니다. 프로덕션에는 승인된 에셋을 사용하세요.

• 로컬 파일은 먼저 Workspace에 업로드합니다. Webflow에 넣기 전에 팀이 검토할 수 있는 원본을 하나로 유지할 수 있습니다.

앱이 추가하는 요소

표준 Lottie 애니메이션은 Webflow Assets에 복사되고 네이티브 Webflow Lottie 요소로 삽입됩니다. dotLottie v2 파일과 인터랙티브 상태 머신은 고급 런타임 기능을 게시된 사이트에서도 유지할 수 있도록 페이지 사용자 지정 코드와 dotLottie 웹 컴포넌트를 사용합니다.

삽입한 요소는 Workspace 파일과 실시간으로 동기화되지 않습니다. 원본이 바뀌면 새 버전을 검토하고 요소를 교체하거나 다시 삽입한 뒤 사이트를 다시 게시하세요.

시작하기

1. 빠른 시작 - 앱을 설치하고 무료 애니메이션을 Webflow 사이트에 게시합니다.

2. Workspace - 비공개 또는 팀에서 승인한 애니메이션 에셋을 사용합니다.

3. 삽입 및 게시 - 컨테이너와 삽입되는 요소를 이해하고 실제 결과를 검증합니다.

관련 문서

• 애니메이션 준비

• 호환성 및 제한

• 문제 해결