NEW

[LottieFiles Official] LottieFiles for Framer : 200% Utilization of Lottie Animations in Framer (Certificate Issued)

Meet the official first Korean-language course from global motion design platform LottieFiles, exclusively on Inflearn! Complete the course and receive an official LottieFiles certificate of completion.

16 learners are taking this course

lottiefiles

실습 중심

자격증

framer

모션

인터랙티브웹

Web Design

Interactive Web

Responsive Web

Lottie

What you will learn!

How to Import and Control Lottie Animations Directly in Framer
Implementation methods for various interactions such as clicks, scrolls, and cursor movements
Practical know-how for implementing sophisticated web interactions without complex code

Recommended for
these people

Who is this course right for?

Designer/planner creating websites with Framer
Web designers and marketers who want to add sophisticated motion to their websites
Frontend beginners who want to implement advanced interactions with no-code

Need to know before starting?

Basic Framer usage experience (frame creation, section composition, etc.)
Understanding Figma's Basic Features
It is structured so that even beginners can sufficiently follow along with hands-on practice by following the flow of the videos.

Hello
This is

1,178

Learners

Reviews

4.9

Rating

Courses

로티파일즈(LottieFiles)는 전 세계 디자이너와 개발자들이 손쉽게 애니메이션을 만들고, 관리하고,적용할 수 있도록 도와주는 플랫폼이에요. Lottie 포맷 기반의 애니메이션을 웹, 앱, 프리젠테이션 등 다양한 환경에 빠르게 적용할 수 있으며,효율적인 팀 협업과 모션 디자인 워크플로우 향상을 위한 다양한 도구를 제공합니다.

Curriculum

All

9 lectures ∙ (31min)

Section 1. Creating Lottie Animations

3 lectures ∙ (8min)

1. Creating Lottie Animations in Figma
03:30
2. Creating animations in Lottie Creator
02:36
3. Creating Lottie Animations Using AI Tools
02:41

Section 2. Applying Lottie Animation to Framer

2 lectures ∙ (7min)

4. Inserting Lottie Animations into Framer Websites
04:46
5. Understanding dotLottie Animation Files
02:27

Section 3. Adding Interactions to Lottie Animations in Framer

4 lectures ∙ (15min)

6. Interactive Animation: Applying Hover and Click Triggers
02:20
7. Interactive Animation: Applying Scroll Effects
02:50
8. Creating Fake 3D Effects with Lottie
04:16
9. Interactive Animation: Making It Respond to Cursor Movement
05:37

Published:

Last updated:

Reviews

Not enough reviews.

Please write a valuable review that helps everyone!

Free

lottiefiles's other courses

Check out other courses by the instructor!

[LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

lottiefiles

グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます。講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

입문

Motion Graphic, Web Design, Lottie

[LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

lottiefiles

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます！講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

입문

After Effects, Lottie, 3d

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

[LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

lottiefiles

グローバルモーションデザインプラットフォーム LottieFiles の公式初の韓国語化講座が、今 Inflearn で独占受講できます！講座をすべて受講すると、LottieFiles 公式修了証を受け取れます。

입문

Motion Graphic, Animation, Figma

[LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

lottiefiles

Similar courses

Explore other courses in the same field!

スケッチアプリマスターコース[Sketch App]

agilelabs

スケッチアプリの基本的な使い方を知っていますが、スケッチアプリのシンボルとプロトタイピング機能をうまく活用していない場合は、スケッチアプリをよく知っているとは言えません！

초급

Web Design, Sketch, Mobile App Design

スケッチアプリマスターコース[Sketch App]

agilelabs

Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

masocampus

画像生成AIの代表的なツール、ミッドジャーニー！基本的な使い方から、実際のデザインプロジェクト実習を通して実務への応用まで、一度に！

입문

Web Design, Character Design, Mobile App Design

Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

masocampus

GSAPのScrollTriggerを活用したポートフォリオ制作

jyoung

GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！

초급

HTML/CSS, scrolltrigger, gsap

GSAPのScrollTriggerを活用したポートフォリオ制作

jyoung

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

입문

After Effects, Lottie, 3d

[LottieFiles公式] After Effectsで作るLottieアニメーション（修了証発行）

lottiefiles

バニラ JavaScript & Tailwind CSS

csslick

AI活用とコンポーネント中心UI制作で学ぶ実務型Web UI開発、デザイナー＋開発者必須コース！

초급

JavaScript, vanilla-javascript, frontend

バニラ JavaScript & Tailwind CSS

csslick

Canva（キャンバ）で私の商品詳細ページをデザインする

codingai

この講義は、人気のデザインツールであるCanva（キャンバ）を使用して、オンライン講座、ショッピングモールなどで使用される商品詳細ページをデザインする方法を教えてくれる入門講義です。

입문

canva, Web Design

Canva（キャンバ）で私の商品詳細ページをデザインする

codingai

外部委託なしでデザイナーのようにスマートストアをデザインする

speedydesign

この講義に従えば、スマートストアの核となる部分を素早く簡単に学び、洗練されたスマートストアを構築できます。1:1 無料デザインコーチングで、希望の雰囲気のスマートストアを作成しましょう。

초급

SmartStore, Photoshop, Web Design

外部委託なしでデザイナーのようにスマートストアをデザインする

speedydesign

映画前売りサイトを作る：デザイン編

webs

ウェブ標準とレスポンシブサイト作り講義によく従ってきたら今は実戦練習番！映画前売サイト制作をデザイン編とコーディング編に分けて学習します。

초급

Photoshop, Responsive Web

映画前売りサイトを作る：デザイン編

webs