inflearn logo
강의

Course

Instructor
inflearn logo
Design

/

UI/UX

[Official LottieFiles] Lottie Animation with After Effects (Certificate Issued)

Check out the first official Korean-language course from the global motion design platform LottieFiles, available exclusively on Inflearn! Upon completing the course, you can receive an official LottieFiles certificate.

(4.9) 9 reviews

484 learners

Level Beginner

Course period Unlimited

After Effects
After Effects
Lottie
Lottie
3d
3d
After Effects
After Effects
Lottie
Lottie
3d
3d
Thumbnail

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

전윤서

38% enrolled

Thank you for the great free lecture.

5.0

lemonida

50% enrolled

Even a complete beginner like me can follow along, thank you!

5.0

Jang Jaehoon

50% enrolled

Thank you for the great lecture!

What you will gain after the course

  • LottieFiles Plugin Installation & Setup

  • After Effects ↔ Lottie(JSON·dotLottie) Import·Export Workflow

  • Automating Animation with Expressions Scripting & Compatibility Check

  • Minimizing file size using Lottie Optimizer

  • Bulk Rendering & 2.5D (Parallax/Extrusion) Stereoscopic Effects

Only on Inflearn!
Take the official LottieFiles course in Korean
and apply it to your work right away!

A Practical Guide to Easy and Lightweight Motion Animation with After Effects and LottieFiles

Do you want to create practical motion animations that can be applied immediately to webs and apps?
In this course, we will show you
how to create animations easily and lightly using After Effects and LottieFiles.

Here's what you'll learn in this course!

From basic motion principles to character animation production

Faux 3D (Fake 3D) production techniques

From collaboration using workspaces to handoffs

Learn the essentials in just 40 minutes from <Lottie Animation with After Effects>.

CHECK 1

What is Lottie?

Lottie is a JSON-based animation file format that

By using Lottie, you can transfer animations as easily as images.

It is lightweight and works on any device, and

The fact that the resolution does not decrease even when resized is a powerful advantage of Lottie.

CHECK 2

Why should you use Lottie?

Flexible Resizing

It can be scaled up or down
without being affected by resolution.

Small Size
Compared to formats like GIF or MP4,
it is much smaller while maintaining the same quality.

Interactivity
Lottie has exposed animation elements, so it can be modified
to be interactive and can respond to interactions such as
scrolling, clicking, and hovering.

Support for Various Platforms and Libraries
It is incredibly easy to hand off Lottie to developers. Lottie animations can be used directly on iOS, Android, Web, and React Native without any modifications.

CHECK 3

The world's top web and app services
are using Lottie

Check out the use cases for Lottie, which is actively used in the industry.

cashbag - showcase card
Gmarket - showcase card(kr) (1)
Qcells - showcase card (2)
showcase card (1)
showcase card (2)
showcase card_kr
showcase card
KR - riid - showcase card
showcase card_toss
gbike-kr card
Spoon - showcase card kr

You can check out various other use cases here.

CHECK 4

How should I take the course?

[MD]언어설정_gif_800_5-9s

Inflearn courses support a variety of audio languages and subtitles.

Click the gear icon (Settings) at the bottom of the lecture screen,
and feel free to select your preferred audio language and subtitles.

CHECK 5

Get a
certificate certified by LottieFiles!

Once you complete all the lectures and submit the final quiz,
you can receive both the LottieFiles Certificate and the Inflearn Certificate!
Feel free to use your certificates on LinkedIn or in your portfolio.

The Inflearn Certificate can be found immediately under the
My Page > My Learning > Certificates menu..

Recommended for
these people

Who is this course right for?

  • UI/UX designers and product designers who want to strengthen brand experience

  • Motion designers and animators looking to maximize productivity

  • A frontend developer who wants to improve collaboration efficiency

  • Designers who want to learn the JSON animation workflow

Need to know before starting?

  • I need basic knowledge of After Effects.

Hello
This is LottieFiles

2,009

Learners

73

Reviews

4.9

Rating

4

Courses

LottieFiles is a platform that helps designers and developers worldwide easily create, manage, and implement animations. It allows for the rapid application of Lottie-format animations across various environments, including websites, apps, and presentations, while providing a range of tools to enhance efficient team collaboration and motion design workflows.

More

Co-instructor

Curriculum

All

8 lectures ∙ (40min)

Published: 
Last updated: 

Reviews

All

9 reviews

4.9

9 reviews

  • sashasavoyskiy155060님의 프로필 이미지
    sashasavoyskiy155060

    Reviews 1

    ∙

    Average Rating 5.0

    5

    63% enrolled

    • lemonida4890님의 프로필 이미지
      lemonida4890

      Reviews 4

      ∙

      Average Rating 5.0

      5

      50% enrolled

      Even a complete beginner like me can follow along, thank you!

      • yunseo92님의 프로필 이미지
        yunseo92

        Reviews 9

        ∙

        Average Rating 5.0

        5

        38% enrolled

        Thank you for the great free lecture.

        • kiki05197544님의 프로필 이미지
          kiki05197544

          Reviews 1

          ∙

          Average Rating 4.0

          4

          38% enrolled

          I don't know anything about AE at all, but watching this makes me feel like I could do it.. 😊😊

          • lottiefiles님의 프로필 이미지
            lottiefiles

            Reviews 1

            ∙

            Average Rating 5.0

            5

            38% enrolled

            LottieFiles's other courses

            Check out other courses by the instructor!

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

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

            LottieFiles

            Free

            Beginner / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+

            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.

            Beginner

            Beginner

            Web Design, Interactive Web, Responsive Web

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

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

            LottieFiles

            Free

            Beginner / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+
            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)Course Thumbnail

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+

            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.

            Beginner

            Beginner

            Motion Graphic, Web Design, Lottie

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)Course Thumbnail

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+
            [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)Course Thumbnail

            [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Animation, Figma, No-code, UIUX

            4.9

            (58)

            1,200+

            Check out the first official Korean-language course from the global motion design platform LottieFiles, available exclusively on Inflearn! Upon completing the course, you can receive an official LottieFiles certificate.

            Beginner

            Beginner

            Motion Graphic, Animation, Figma

            [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)Course Thumbnail

            [Official LottieFiles] Figma to Lottie: Motion Animation Created in Figma (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Animation, Figma, No-code, UIUX

            4.9

            (58)

            1,200+

            Similar courses

            Explore other courses in the same field!

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)Course Thumbnail

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+

            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.

            Beginner

            Beginner

            Motion Graphic, Web Design, Lottie

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)Course Thumbnail

            [LottieFiles Official] LottieFiles for Webflow: Interactive Websites Completed with Lottie (Certificate Issued)

            LottieFiles

            Free

            Beginner / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+
            Creating a First-Person 3D Website with Three.jsCourse Thumbnail

            Creating a First-Person 3D Website with Three.js

            studiomeal

            $68.20

            Basic / Interactive Web, Three.js, 3d, JavaScript, Portfolio

            5.0

            (9)

            200+

            This course will teach you how to create a first-person 3D website that works on both desktop and mobile.

            Basic

            Basic

            Interactive Web, Three.js, 3d

            Creating a First-Person 3D Website with Three.jsCourse Thumbnail

            Creating a First-Person 3D Website with Three.js

            studiomeal

            $68.20

            Basic / Interactive Web, Three.js, 3d, JavaScript, Portfolio

            5.0

            (9)

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

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

            LottieFiles

            Free

            Beginner / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+

            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.

            Beginner

            Beginner

            Web Design, Interactive Web, Responsive Web

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

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

            LottieFiles

            Free

            Beginner / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+
            Rhino 'Pro Tips' for 3D Modeling Beginners Part.1Course Thumbnail

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.1

            soobaksee

            $77.00

            Beginner / Rhino, 3d-modelling, 3d

            5.0

            (62)

            200+
            Update
            Update

            3D modeling that's hard to start..? Modeling that's stuck and not progressing..? 'Pro-tips' for your first start—if it's Rhino, your skills will improve OK! Frustrating classes with no feedback..? 👉 Adding feedback to online lectures! (Don't hesitate to ask questions!)👍🙆‍♀

            Beginner

            Beginner

            Rhino, 3d-modelling, 3d

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.1Course Thumbnail

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.1

            soobaksee

            $77.00

            Beginner / Rhino, 3d-modelling, 3d

            5.0

            (62)

            200+
            Update
            Update
            Rhino 'Pro Tips' for 3D Modeling Beginners Part.2Course Thumbnail

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.2

            soobaksee

            $92.40

            Basic / Rhino, 3d-modelling, 3d, 3d-printing

            5.0

            (18)

            100+
            Update
            Update

            From now on, the 'real' product modeling begins! Master detailed product modeling + surface modeling techniques to perfectly escape the beginner level! 👌 No more frustrating online lectures! Improve your skills with substantial class materials and feedback! 👍🙆‍♂

            Basic

            Basic

            Rhino, 3d-modelling, 3d

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.2Course Thumbnail

            Rhino 'Pro Tips' for 3D Modeling Beginners Part.2

            soobaksee

            $92.40

            Basic / Rhino, 3d-modelling, 3d, 3d-printing

            5.0

            (18)

            100+
            Update
            Update
            Understanding Lottie to Improve Designer SkillsCourse Thumbnail

            Understanding Lottie to Improve Designer Skills

            designbase

            $26.40

            Basic / Lottie, Web Design, JavaScript, Interactive Web

            4.7

            (12)

            100+

            You don't have to rely on Gif or Video anymore. You will learn how to output animations created in After Effects as code and implement various interactions through JavaScript. You can also create an attractive website.

            Basic

            Basic

            Lottie, Web Design, JavaScript

            Understanding Lottie to Improve Designer SkillsCourse Thumbnail

            Understanding Lottie to Improve Designer Skills

            designbase

            $26.40

            Basic / Lottie, Web Design, JavaScript, Interactive Web

            4.7

            (12)

            100+
            In Search of After Effects Practical PrinciplesCourse Thumbnail

            In Search of After Effects Practical Principles

            strikeapple

            $77.00

            Intermediate / Motion Graphic, After Effects, Video Production, product design, UIUX

            This explains intermediate-level After Effects techniques and above that can be utilized in practical work. Although explained using CC2023, it focuses on fundamental principles regardless of version. Rather than wasting time on tool explanations, I've prepared material that enables proactive research.

            Intermediate

            Intermediate

            Motion Graphic, After Effects, Video Production

            In Search of After Effects Practical PrinciplesCourse Thumbnail

            In Search of After Effects Practical Principles

            strikeapple

            $77.00

            Intermediate / Motion Graphic, After Effects, Video Production, product design, UIUX

            Build a First-person View 3D Website with Three.jsCourse Thumbnail

            Build a First-person View 3D Website with Three.js

            studiomeal

            $68.20

            Basic / Three.js, Interactive Web, 3d, JavaScript, Portfolio

            In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

            Basic

            Basic

            Three.js, Interactive Web, 3d

            Build a First-person View 3D Website with Three.jsCourse Thumbnail

            Build a First-person View 3D Website with Three.js

            studiomeal

            $68.20

            Basic / Three.js, Interactive Web, 3d, JavaScript, Portfolio

            Blender for Beginners: Learn Blender with 3D Icons for UX/UI Designers!Course Thumbnail

            Blender for Beginners: Learn Blender with 3D Icons for UX/UI Designers!

            BBoDX

            $51.70

            Beginner / Blender, 3d-modelling, 3d, 3d-rendering

            5.0

            (13)

            200+

            This is a beginner's course in Blender. This is a beginner's 3D Blender course where you learn while creating 3D icons!

            Beginner

            Beginner

            Blender, 3d-modelling, 3d

            Blender for Beginners: Learn Blender with 3D Icons for UX/UI Designers!Course Thumbnail

            Blender for Beginners: Learn Blender with 3D Icons for UX/UI Designers!

            BBoDX

            $51.70

            Beginner / Blender, 3d-modelling, 3d, 3d-rendering

            5.0

            (13)

            200+

            Free