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.
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?
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 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊
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.
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.