강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Understanding Lottie to Improve Designer Skills

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.

(4.6) 10 reviews

134 learners

  • designbase
3시간 만에 완강할 수 있는 강의 ⏰
Lottie
Web Design
JavaScript
Interactive Web

Reviews from Early Learners

What you will learn!

  • How to export animations created in After Effects as Lottie files

  • How to implement movement on the web through JavaScript from a JSON file output by Lottie

A library created by Airbnb
Get started with Lottie 🎈

moving images
Would you like to make it?

Have you heard of Lottie , the hot library created by Airbnb?

Implement various interactions through Roti.

Lottie allows you to create high-quality animations
You can make it freely.

Let's first introduce Lottie. It's a technology that outputs data values for moving animations in JSON format, allowing them to be applied as actual code on the web and in apps . Learning this technology will allow you to implement moving animations without relying on GIFs or videos.

This course will teach you everything you need to know about Lottie. We'll first set up the environment for using Lottie, then learn how to convert animations created in After Effects into code using Bodymovin and implement various interactions using JavaScript.


Implemented with Lottie
animated images

You can see more examples made with lottie at that link.

Example - Screen that runs Roti animation when clicked

Example - Running Roti Animation Based on Scroll Depth

Example - Animation created and output using After Effects


Who would benefit from listening?

At a standstill
No more
Not satisfied
Passionate designer

I worked on it
Animation to Code
I want to apply it to the web
Competent Designer

Lottie.js
In a short time
I want to learn
Web publisher


hello,
Product Designer Who Codes
This is the design base .

I'm a product designer who codes. I empathize deeply with the challenges designers face and the areas they want to implement.

What we're trying to learn isn't something daunting. It's just something that seemed difficult and was being avoided, but if you put your mind to it, anyone can do it. Learn Roti and create some attractive designs.

Please note that this course does not teach you how to create sensational animations using After Effects. It focuses on how to output your animations as code, apply them to the web, and implement interactions using JavaScript. This course is short and focused, focusing on the essentials.


Let's learn in order!

There are a total of 9 lecture videos prepared, divided into two sections: basic and advanced.
In the basics, you'll learn how to analyze Lottie code and split it into easy-to-use HTML, CSS, JS, and JSON files. You'll also learn how to use Lottie's built-in features.

Separate complex, unorganized code into files

In advanced cases, you can implement various interactions, such as mouseovers, scrolling, and clicks, through JavaScript. This is the biggest difference from GIFs: you can directly control the frames as desired.

Implementing interaction code directly in JavaScript


Frequently Asked Questions 💬

Q. What are the benefits of learning roti?

You can apply animations created with After Effects to web and app applications. This element enhances the quality of your designs.

Q. I'm a designer who doesn't know any code at all. Will this help?

Just knowing what Lottie is and how it works can make collaborating with developers a lot of fun. However, basic knowledge of HTML/CSS and JavaScript will allow you to utilize it even more effectively.

Q. Is there anything I need to prepare before attending the lecture?

The tools used in this course are After Effects, Visual Studio, and Illustrator. It's recommended that you familiarize yourself with these tools. Furthermore, a basic understanding of JavaScript is essential for successfully completing advanced courses.

Q. Do you provide example files?

Of course, we provide example files used in the lectures to make your study as easy as possible.

Q. Can you also teach me how to use After Effects or create animations?

This course doesn't teach you how to create sensational animations with After Effects. It focuses on how to output your animations as code, apply them to the web, and implement interactions with JavaScript.

Recommended for
these people

Who is this course right for?

  • UI designer interested in animation and interaction

  • Web designer who is good at web coding

  • Web publishers who want to learn how to use Roti

Need to know before starting?

  • Basic knowledge of HTML and CSS

  • Basic knowledge of Javascript

  • How to use After Effects

Hello
This is

35,156

Learners

386

Reviews

32

Answers

4.8

Rating

5

Courses

디자인베이스는 누구나 쉽게 디자인을 배울 수 있도록 디자인 강좌를 만들고 있습니다.
저는 현업에서 UXUI 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊

 

- 인프런 수강생 3.1만 명 / 수강평 4.8점
- 실무 경력 8년차 디자이너 (스타트업 창업, 에이전시, 인하우스)
- 유튜브 구독자 8.1만 명

 

실무에서 바로 사용하실 수 있도록 정확한 내용과 양질의 강의를 제공하겠습니다. 📖

 

Curriculum

All

9 lectures ∙ (55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

10 reviews

4.6

10 reviews

  • bokiri99992826님의 프로필 이미지
    bokiri99992826

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

    This was a really helpful lecture for me. I'm a designer who doesn't know much about After Effects or scripts, but somehow! I feel like I can make it too. Thank you, teacher.

    • designbase
      Instructor

      Thank you so much for the encouraging review! Hehehe

  • dicahyunse6566님의 프로필 이미지
    dicahyunse6566

    Reviews 1

    Average Rating 5.0

    5

    44% enrolled

    • gichulroh6344님의 프로필 이미지
      gichulroh6344

      Reviews 14

      Average Rating 4.7

      5

      100% enrolled

      It's a short lecture, but it has everything you need. You can use it a little more in practice. I started as a designer, then moved to publisher and front-end development, so it was easy to understand. However, UI designers need to know development concepts. It would be good to add a simple explanation in a PDF document or something.

      • mchoi2084님의 프로필 이미지
        mchoi2084

        Reviews 4

        Average Rating 5.0

        5

        100% enrolled

        It's pretty fast. I don't know if it's trimpassing. At least it's a sample.

        • tay님의 프로필 이미지
          tay

          Reviews 20

          Average Rating 4.8

          5

          100% enrolled

          After Effects and JavaScript!! This was a really fun lecture ㅠㅠ Thank you!!

          $26.40

          designbase's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!