Animate Apps with Kite Compositor | Amos Gyamfi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (1h 10m)
    • 1. Introduction to Animate Apps with Kite Compositor

      1:58
    • 2. What is Kite Compositor?

      1:11
    • 3. A Tour of the Map Animations

      1:07
    • 4. Touring the Kite Compositor Interface

      2:15
    • 5. How to Import Designs from Sketch into Kite

      3:59
    • 6. How to Fix Imported Sketch Designs in Kite

      3:29
    • 7. Using an Animation Group: Creating Notifications Animation

      6:55
    • 8. How to Create a Pulsating Animation

      7:15
    • 9. How to Reuse Animations in Kite

      3:00
    • 10. How to Animate Rotation Using Spring Animation

      4:11
    • 11. How to Create Custom Motion Paths

      4:55
    • 12. Understanding Motion Path Editing

      2:38
    • 13. How to Rotate an Object with Custom Motion Path

      2:09
    • 14. Using the Pen Tool and Keyframe Animation: Creating and Editing a Complex Motion Path

      6:40
    • 15. Using Dash Phase: How to Create an Animated Marching Ants

      2:25
    • 16. Using Stroke-start and Stroke-end: How to Create a Write-on Animation

      4:48
    • 17. Using Keyframe Animation: Building a Pencil Drawing Animation

      4:46
    • 18. How to Emit, Animate and Render Particles Using Emitter Layers

      3:08
    • 19. How to Generate and Animate Snow

      3:16
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

8

Students

--

Projects

About This Class

4b970778.gif

Welcome to the Class: Animate Apps with Kite Compositor. Kite is a Native MacOS visual animation and motion building application. Kite is used for creating and prototyping animations for iOS, tvOS, watchOS, macOS, Android, and web applications.

Purpose of the class:

The purpose of this class is to teach students how to use Kite Compositor to build the Map Animations in the above image from Scratch.  

What will students learn from this class?

In this class, students will learn how to use an animation group to animate opacity, position, scale, and rotation. As a student of this class, you will be able to take objects and move them in custom motion paths as illustrated in the animation above. 

By the end of this class, students will know how to emit, animate, and render particles such as snow, fireworks, smoke, and vapor using Kite Compositor. 

Objectives of the class:

  • Understanding Keyframe Animation.
  • Learning the Physics of Spring Animation.
  • Understanding Group Animation.
  • How to animate opacity, rotation, and scale.
  • How to move and orient objects on custom curved motion paths.
  • Understanding and animating stroke properties such as stroke-start and stroke-end. 
  • Understanding and using Emitter Layers to generate particles. 

Lessons of the class

1. Introduction to Animate Apps with Kite Compositor

2. What is Kite Compositor?

3. A Tour of the Map Animations

4. Touring the Kite Compositor Interface

5. How to Import Designs from Sketch into Kite

6. How to Fix Imported Sketch Designs in Kite

7. Using an Animation Group: Creating Notification Animation

8. How to Create a Pulsating Animation

9. How to Reuse Animations in Kite

10. How to Animate Rotation Using Spring Animation

11. How to Create Custom Motion Paths

12. Understanding Motion Path Editing

13. How to Rotate an Object with Custom Motion Path

14. Using Dash Phase: How to Create a

15. Using Stroke-start and Stroke-end: How to Create a Write-on Animation

16. Using Keyframe Animation: Building a Pencil Drawing Animation

17. How to Emit, Animate and Render Particles Using Emitter Layers

18. How to Generate and Animate Snow

Meet Your Teacher

Teacher Profile Image

Amos Gyamfi

Designing UI, Animations & Interactions

Teacher

I am teaching how to design iOS interfaces and animations using SwiftUI. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to Animate Apps with Kite Compositor: Hi, I would like to welcome you to the class: Animate Apps. with Kite Compositor. My name is Amos. Kite is a native MacOS, visual animation and motion building application. Kite is used for creating and prototyping animations for iOS, tvOS, watchOS, MacOS, Android, and web applications. The purpose of this course is to use Kite to create these map animations from scratch. In this class, you will learn how to use an animation group to animate opacity, position, scale, and rotation. You will learn how to animate the Map Marker using Spring Animation. I will show you how to create the drawing animation of the pencil. and the note icons. Not only that, as Edward Bulwer once said, in art, as in life, the beautiful moves into curves. As a student of this class, you will be able to take the car icons and move them in custom curved motion paths. By the end of this class, you will know how to emit, animate and render particles, such as snow, fireworks, smoke, and vapor, using the Emitter Layers in Kite. I will show you how to generate synthetic, but beautiful and organic snow that looks realistic, like the snow that falls on the streets of Moscow in the wintertime. So join me to teach you to Animate Apps with Kite Compositor. 2. What is Kite Compositor?: Hi, in this video, we'll look at what Kite Compositor is about. So kite is a native MacOS application that is used for designing interface animations and prototyping. You can use Kite for creating highly interactive prototypes. Kite is built upon the Apple Core Animation Framework and provides you the ability to create beautiful and organic animations. It is the same framework that is used for animating iOS, MacOS, tvOS applications. If you are a designer, Kite offers you building blocks like layers, animations and actions that allow you to assemble interface animations like Lego pieces. For developers and engineers. Kite allows you to add JavaScript to create interactive applications. In short, you can use Kite to create animations and motion for phones, tablet, watch, tvOS, and desktop animations. So join me in the next video to Animate Apps with Kite Compositor. 3. A Tour of the Map Animations: Hi, the purpose of this course is to teach you how to create fine-grained and beautiful animations using Kite. At the end of this course, you'll be able to create these map animations. The course will teach you how to create this write-on effect and animation of the pencil. You will learn how to create notification animation of the red circle. You will learn how to create rotation animation. using Spring Animation. You will learn how to create the pulsating effect of the current location. I'll take you through creating the beautiful animations of the cars. We are going to take the cars and move them on curved motion paths using Keyframe Animations. After that, I'll show you how to create a scale and opacity animation of this car. Eventually, we will learn how to create particle emissions. And with this, you will be able to emit, animate, and render this organic but synthetic snow. So join me in creating these beautiful and organic map animations 4. Touring the Kite Compositor Interface: Hi, in this video, we take a look at the interface of Kite. After launching the Kite app, you can create a new document or select from a template. Let's create a new document. So this is a blank document. In the middle of the screen. We have the canvas. It serves as the artboard. The canvas is where we add layers and do the actual animation work in Kite. On the top, we have the toolbar. From the toolbar, we can add some basic tools like text, gradient, shape and advanced objects, like the replicator, emitter, page, tiled, and scroll. Let's create a basic layer. By selecting the Rectangle tool. I can click here and drag to create a rectangle. Once you select a layer in Kite, you can go to the right. Over here, we have the object properties. So we can inspect all the properties of this layer. On the left, we have the layer list, for example, I can drag this layer to create a new version. And that shows in the layer list, you can drag a layer and put it inside another layer. You can see here this rectangle is inside the other one. By right-clicking any object, you can inset animation and interaction using actions. Let's add basic animation. Adding animation, we get the timeline. The timeline is where you adjust the animation properties like duration and animation timing. By going into the toolbar, we can use these icons to toggle the visibility of some panels in Kite. For example, if we don't want to show the timeline, we can click on this icon. We can hide the Property Inspector by clicking on this, and also hide the layer list by clicking on this icon. So this is how the Kite interface looks like. In the next video, we will take a look at how to bring content from Sketch into Kite. So see you in the next video. 5. How to Import Designs from Sketch into Kite: In this video, we'll look at how to bring designs from Sketch into Kite. In Kite, you can use the basic drawing tools to draw interface elements. But if you want detailed designs, you have to use your favorite design tool like, Adobe XD or Sketch. In this video, I'm going to show you how to bring content from Sketch into Kite. Over here, on the left, we have a Sketch document. On the right is a blank Kite document. Let's go to the designs in Sketch. To bring content from Sketch into Kite, you have to define the artboard size so that the artboard size in Sketch has the same size as the screen size in Kite. By selecting this artboard. When we go to the properties inspector, you can see it has a width of 414 and a height of 736. In Kite, we have to use the same size. So over here, we can go to the Properties Inspector and set the canvas size. Let's change the width from 900 and write 414 and change the height to 736. In Kite, we have to use the same as the size of the artboard in Sketch. In this case, we are going to successfully import this document into Kite. To import from Sketch into Kite, we go to the Kite document and go to File and select Import. Here we have two options to select from. We can import Adobe XD document, but for now we are using Sketch, so let's click from Sketch. And that brings this dialog window. These are all the settings we have to check before we import into Kite. Let's start with the image import. You can see over here it is set to 2x, but we need 1x, so I'll click here and select 1x. The next option is "import paths as". As you can see over here, it is checked shape layers. If we change it to image layers, all the paths we create in Sketch like these lines, and all shapes, Will be converted into an image. That is not what we want. So we have to live this setting as it is. The next option is "Import text layers as". It is already checked as text layers. If we change this option to image layers, all your text layers will be converted into image layers. That is not what we want to. We have to leave it as it is. We will live the other settings as there. And click import. And that brings the content from Sketch into Kite If we compare the design we just brought from Sketch into Kite closely to the one in Sketch. You can see there are some few differences. Let's look at this icon. You can see over here it points downward. But here, it points backward. This is because if you create a layer in kite and apply transformations such as rotation to the layer, that rotation will be reverted when you import the layer into Kite. The same with the car. You can see here it points to the right, but the one in kite points upward. I'll show you in the next video how to use the transform property in Kite to fix this issue. So see you in the next video. 6. How to Fix Imported Sketch Designs in Kite: Hi, in the previous video, we looked at how to bring content from Sketch into Kite. In this video, we'll look at how to fix your designs. If something goes wrong. If we compare the design in Kite to the one that we have in Sketch, you can see this text, the version in Kite doesn't show properly. We can select this text by clicking Command and click. And then we expand the bounding box around the text. Like so. We can use the arrow keys to move it up so that the space between that and the text below are the same as the one we have in Sketch. When you look at the accordion icon in Sketch, it points downward. version in Kite, points backward. We can use transformation to make it a point downward. I'll press Command and click on the icon to select it. Here, we can go to the Properties Inspector. We'll go to the rotation section. We can use Z-rotation to rotate this icon. You can see here it has a rotation value of 0. Let's change this value and put -90. If I click the empty canvas, you can see it now points downward. But the position has also changed. We can select it again by pressing command and click and use the arrow keys to move it to the position we want. When you also look at this road, the dashed line. And compare that to the one in Sketch. You can see it has a gradient. But for the version in Kite, and we don't have the gradient. This is because gradient in Sketch is not supported in Kite. So if we want to convert this to a gradient, we have to use the gradient in Kite. But I think we don't need to convert this to a gradient, so we have to live it as it is. Next, let's go to the car icon. The one here in Sketch points to the right, but the one in kite points upward. We can select that with Command and click. And it used a transformation by going to the inspector panel. We go to the section rotation under transform and choose the z-otation property. We can change its value from 0 to 90 and use the arrow keys to move it to the position we want. So this is how to fix your designs in Kite, after important from scratch, if something goes wrong. But there are few tens to take a look at. If you have to import crater from sketch, the gradient or not work in Kite, you can add your own gradient in kite. So this isn't an issue. And if an object is rotated in Sketch, for example, if you import into the rotation will be removed. So you have to use the transform property to rotate it again. 7. Using an Animation Group: Creating Notifications Animation: Hi, it is now time to start creating all the animations in this video. Let's start with the notification animation. That is the blinking of the red circle. We have to use an animation group containing scale and opacity. To create animations in kite, you have to select the layer you want to add the animation to. We can go to the layer list and select the object that is the red circle. With that selected, we press "Control" and click on the layer. We go to the Insect and go to the animation section. We have Basic Animation, Keyframe and Spring Animation. We're going to select Group Animation. And that adds this animation object to the layer we selected. So this is the group animation, and that contains two other animations. You can rename animations in Kite. Once they're added. Let's change this to notification. And then we define the type of animations we are going to create. We need scale and opacity. So we rename the first one to scale and change the second one to opacity. Since we want to create a blinking animation, we convert the opacity of the red circle to 0 and also its scale to 0. Let's set the opacity and scale of the red circle to 0. By selecting the layer and go to the layer list. We go to Appearance. You can see we have this opacity property. Let's change it from 1 to 0. Then we go to transform. Under transform, we have scale X and Y. We changed the value from 1 to 0 as well. We have the red circle still selected in the layer list. But when you come to the canvas, we don't see it here because we have set its opacity and scale values to 0. You have to set the initial state and the final state of the animation. You can see here we have the "from" value, which is the initial state, and the "To" value is the final state. Since we set the scale to 0, we can have this one checked. And then set only the final state. It is the same as checking this and then putting 0. I will leave it unchecked and check the final state of this animation to 1. So we want the scale to change from 0 to 1. You can see from the animation property is transform rotation. But we can change it and select scale. We go to transform scale. We want to use the X and Y property. So I will select XY. That is going to scale both the width and height of the red circle. Let's also change the animation type from Spring Animation and select. Basic Animation. Once we add the animation, we can now go to the timeline and see what we just added. We can use the Playhead to preview the animation that we just added. You can see from here, we don't see the red circle at all because we have its opacity also set to 0. We have finished with the properties of the scale. Let's go to the opacity. We have the opacity animation selected. We go to the Properties Inspector and insert in the same way we did the scale animation. You can see here the animation type is set to basic animation. Let's leave it like that, and go to the animation property. You can see from here it is set to anchor point. But the property we are interested in is opacity. So we go to the Appearance section and select Opacity. We can live the initial state of this red circle as 0. Or we can check this box and write the value here. I will leave it unchecked. What do we have to do is to set the final state of the red circle. So we click this and change the value to 1, like that. And that is also set in the animation. So we can now go to the Playhead and drag this. You can see the red circle, hides, and shows. We can set how many times we want the animation to play using what is called Repeat Count in Kite. To do that, we have these 2 animations. Those are the individual animations. But since we are using group animation, we can set the properties of both animations using the animation group. With that selected. We go to the Properties Inspector. We can set when we want this animation to begin. We can also time-shift the animation or set the number of iterations we want this animation to undergo. Also, we have the duration and speed. What we are interested in is the Repeat Count. By changing this to a large value, we make this animation repeat forever. For example, changing it to 1200. Let's leave the duration as 1 and the speed as well. We can now go to the Playhead and scrub it 00:06:03.260 --> 00:06:05.850 through, to see the animation. Or go to the timeline and click on the play icon. So this is how to create this notification animation by blinking the red circle. We created this animation using an Animation Group containing scale and opacity. We set the individual properties of the scale animation and also the opacity animation. And since this animation is contained in their group, we set the number of times we want this animation to undergo under the group. With this, we have been able to create a notification animation by blinking the red circle. 8. How to Create a Pulsating Animation: Hi. In this video, we are going to create the pulsating animation of the circle behind the marker. So let's get started. So in this project, we have the rotation animation of the marker, that is Spring Animation. We are going to add a pulsating effect behind the marker. We are going to create this animation is using a circle, but we don't have a circle in Kite. So let's create a rectangle and convert that to a circle. I'll press R on the keyboard and press Shift, Click do drag to create a rectangle. From the inspector, I will change the width to 60, and the height to 60 as well. To convert this rectangle to a circle, we can use the corner radius property. Since we have the size to be 60, that is the width as 60 and the height as 60. To convert this to a circle, we can go to the corner radius property and divide the width or the height by 2. So we put 60/2 and that is 30. And that converts the rectangle into a circle. Let's change the color. We are going to put a circle behind the marker. So we go to a layer list and drag this layer and put it behind the marker. When the circle is selected. On the top left, you can see we have this dotted circle. That is the position of the anchor point. We are going to move it to the center by going to the properties inspector and go to the section anchor point. We can click here to move it to the center. Since we are creating a pulsating effect of the circle, we have to set the opacity and the size to 0. With the circle selected, we go to the appearance and search for opacity. We drag the slider and set capacity to 0. The circle is still selected on the Canvas, but we don't see it. Let's go to the transform and also change the scale value from 1 to 0. Next, we can add the animation. Before we do that, let's rename this layer to pulsate, We can now, Control click and go to insert and choose the type of animation, we want to add by going to the section animations. We're going to animate to properties, scale, and opacity. So we have to choose an animation group. So we go under animations and select. Group animation. Now, when we check in the layer list, You can see we have this animation object added to the circle. That is the group of animation. And the group of animation contains other two animations, transform rotation and anchor point. Let's rename the animation to pulsate. And rename this animation to opacity. And the next one to scale. What we have to do next is to select the animation and change its properties. We can now go here and set the initial state of the animation and the final state of the animation. We already have the circle's opacity so to 0. So we are going to use animation to move it from 0 to something like 0.2. So we have the initial opacity of a circle set to 0, that is the "From"value. And the final opacity set to 0.2, that is the "To" value. Let's go to the next. We select the scale animation and do the same. We go to the Properties Inspector. And set the "To" and "From" values. Before we do that, we have to change the property animation type. You can see the one for opacity. We did not even change the one for opacity. We have the property still set to rotation. Let's change it from rotation and go to Appearance. Here we set it to opacity. So this is going to change from 0 opacity to 0.2 opacity. Let's go back to the scale. We change the property from anchor point unquote to the transform section. We are going to select the Transform -> scale. Previously, we set the initial scaled value of the circle to 0. So we can check this and put 0 or leave it unchecked. The "To" value. That is the final state. We check this and set it to 1. We can come to the timeline and use the Playhead. We drag it to preview the animation. You can see we have the pulsating animation of the circle. We can also click on the icon to play the animation. But as you can see, the circle animation plays only once. If we want the animation to repeat for a longer time, we have to set repeat count on the opacity animation and also the scale animation. With the scale animation selected. We go to the Properties Inspector. Under timing, We change the repeat count from 0 to 1200. And do the same for the opacity animation. We change the repeat count from 0 to 1200. 00:06:36.485 --> 00:06:40.280 If we now click the play icon. You can see this animation has started repeating. We can also stop it. Go to the toolbar and click present. So this how to create the pulsating animation in Kite. We can do this using group animation and animating 2 properties, opacity, and scale. 9. How to Reuse Animations in Kite: Hi. In this video, we take a look at how to reuse animation in Kite. When we create animation in Kite, it allows you to copy the animation from one object to another object. So let's take a look at how to do that. We created the pulsating animation of the circle. In one of the previous videos. We can copy this animation and use it on the car icon over here. Let's do that. You can see from the layerlist, we have the pulsating animation. Over here. It is a group animation, consistent or opacity and scale. With a group animation selected, we can press Command and C to copy the animation. Then we go to the icon on which we want to paste this animation. We can then press Command and click on the icon. And that selects the car icon. You can see it in the layer list. We can now press Command and V to paste the animation. So we have to the pulsating animation of a circle over here. We also have it on the car icon. To get the animation to work, we have to rename all the animation layers. So starting from the group animation pulsate, it let's change the name from pulsate to arriving. We change the opacity animation to transparency. And then, change the scale animation to size. Once you do this, then, the animation of the car will also work. When we select the transparency animation and go to the properties inspector. You can see it starts from 0 and then goes to 0.2. That is, the initial state of the animation is 0 and the final state is 0.2. So let's change this value to one. The next thing to do is to set the opacity and the scale values of the car to 0. We select the car from the layer list and go to the Properties Inspector. We'll go to the section appearance and change its opacity from one to 0. We also go to the transform section. And look for scale. You can see here we have scale XY. We change the value from 1 to 0. We can now go to the toolbar and click present. You can see over here the animation is a exactly the same as the pulsating animation of the circle. So, this is how to reuse animations and Kite. If you create animation for one object, Kite gives you the ability to copy that animation and paste on another object. And that is what we did in this video. 10. How to Animate Rotation Using Spring Animation: Hi. In this video, we take a look at the rotation of the marker, that is the green marker. Using Spring Animation in Kite. To add the spring animation in Kite, we have to select the object. We are interested in the marker. Let's go to the layer list and click to select the object. We press Control. And go to insert. And go to the Animations section and select the type of animation we want to add. We're going to select Spring Animation and that as the animation to the timeline. And also this animation object to the layer we selected. We can set the properties of this animation in the timeline or go to the Properties Inspector. The first thing to do here is to set the initial state and final state of this animation. We are creating rotation animation using Spring. So we have to set the initial rotation and the final rotation using the "From" value and the "To" value. And the end of the animation, we want the rotation to be 0, so we change this value to 0. Next, we go to the "From" value. Let's change this to -18 degrees. But we cannot enter 18 degrees in this field because the field is in radians. So we have to convert the 18 degrees to radians before Kite accepted. If we leave this value as minus 18, Kite will still think this value is in radians. So let's open the browser and use this online radians to degrees converter by putting 18 here, you can see it is 0.3. in radians. So we come back to Kite and change this value to -0.3. Then we go to set the other properties of this animation. Let's start with Stiffness. Stiffness is the same as the tension in the spring. Having a larger value for stiffness, the object will be harder to move. Over here, we'll leave the value as 200. And the next is Damping. Damping is the same as the frictional force. By having a smaller value for damping, we increase the bounciness. If you have a larger value, we reduce the bounciness of the animation, let's change the value from 10 and put 2. So, changing it from 10, we're going to increase the bounciness of the animation. The next is the Mass. Mass is the same as the weight of the object. If you have a lot of value for mass, the object will move slowly. The initial velocity and the mass, we just leave them as they are. The next thing we have to do is to go to the timing and set, how many times we want this animation to undergo using what is called Repeat Count. You can see over here it is set to 0. We use this to control the number of iterations we want this animation to undergo. Let's change it to 1200. If you change the value to a larger value, you can repeat the animation for a longer time. With this done. I'll leave all the other settings as they are and go to the timeline. We can click on the Playhead to play the animation that we just added. Or click on the Play icon to play the animation. We can also go to the toolbar and click, Present to see a preview of the animation. So this is how to create the rotation animation of the marker using Spring Animation. By setting the damping value to a smaller value. You can see we have increased the bounciness of the rotation. 11. How to Create Custom Motion Paths: Hi, in this video, we are going to learn how to move objects on custom motion paths using Keyframe Animation in Kite. We're going to create an animation of the cars. We are going to take the black and move it on this custom motion path using Keyframe Animation. So let's get started. In this project, we have the car and the path along, which the car needs to move. Let's go to the layer list and select the car. With the car layer selected. We can Control-click and go to Insert. We're going to add keyframe animation. So we go to the animation section and select Keyframe Animation. Adding Keyframe Animation in Kite. We can define the path along which, this object needs to move. So I'm going to click keyframe animation. And that adds, this animation to the timeline. When we also check the layer list, you can see we have this animation object attached to the taxi icon. You can select it from the timeline and go to the inspector. Over here, we have this keypoints. The keyframes define the initial point of the object. So, now we have this object at this position and that is shown in the inspector. If we now go to the timeline to preview this animation, let's look at what we have. Kite added a default position animation, but this is not what we want. So we put the Playhead to 0 so that the car comes to the original position. By going into the animation type, will go to this section path. Using the path property of keyframe animation, we can define our own path along which we want any object to more. To create your own path, we click on the gear icon. On the other side of the path. We can choose SVG path or we can edit the path. The purpose of this video is to show you how to edit the path. So I wuill select edit path. Once we do that, you can see the cursor of the mouse has now changed to this Pen icon. That means that we are ready to now define the path. You can click to define the initial point and then move to any position you want this car to follow. Let's come here. For now. Instead of clicking, we'll click and drag to create a curved point. Then come to this point. To create a street point, we just need to click. At this point, you can see it is curved. So to create a cave point, we click on drag like so. And then we can all come to this point. Click again to create a straight point, and then move to the destination. Over here. We have to click and drag to create a curved point. Then to preview this, we can go to the timeline and drag the Playhead. To the right. You can see we have defined the path for the car to move along. To let go the tool, let's press Escape and go to the timeline again and drag the Playhead. We can also click on the Play icon in order to preview the animation. When we select the animation and go to the properties inspector, you can see we have keyframes, and this defines the position of the object over time. The first one is the one that we see over here. If we go and track the Playhead to this point, this is the position of the car over this time, and that is this one. Then we go to the next point. Which is that, the next point? Which is this. This point, That is this one. And finally, it comes to the destination, which is this one. So the keyframes define the position of the car over time. The one thing, we noticed from this animation is that, as the car moves along the road, you can see it doesn't rotate. At this point. It needs to rotate and move along the path, but it doesn't. We can set it in a way so that as it moves, it rotates along the path. So I'll show you in the next video how to orient an object to a custom curved motion path. 12. Understanding Motion Path Editing: Hi, in the previous video, we looked at how to rotate an object as it moves along its motion path. In this video, we look at motion path editing. As the car moves along this path, you can see see at some point, it is not on the line. For example, at this point. And also here. And here as well. And this point too. We're going to edit the path so that it moves exactly on the line. To edit the keyframe animation path, we have to select it from the timeline and go to the Properties Inspector. We go to the Path section and click on the gear icon. Over here, we can choose an SVG path or we can edit the path. Once we clicked that, As we move the mouse cursor from this panel to the canvas, you can see it tends to a pencil icon. That means that we are ready to define the path along which we want the opposite to follow. You can see from here we have ordered points on the path by clicking each one of them. For example, selecting the one. At this point. We can go to the Properties Inspector and use the X and Y position to move the point. For example, by clicking this field, we can use the arrow keys to move it up or down. We can also go to the next point by selecting this point. And you use the Y property to move it up. We can repeat the process by selecting each one of the points, and do the same thing. Once you are done, you can press escape to let go the tool. We can now go to the timeline and use the Playhead to preview the animation again. And as you can see, the car is moving exactly on the line. So this is how motion path editing works. in Kite. You can edit the path of keyframe animation by using the path property and clicking on this gear icon to edit the motion path. 13. How to Rotate an Object with Custom Motion Path: Hi, in the previous video, we learned to create the motion of the car along this curved motion path. As you can see from this animation, the current does not rotate. As it gets to this point. The purpose of this video is to show you how to orient the object along a curved motion bar so that it rotates on the point where we have the curves as it moves along the custom curved motion path. There are two ways to orient the object along the custom motion path, we can use rotation animation for each point of the keyframe. So that for example, when it gets here, we can use rotation animation to rotate the object. To point upwards. As it gets to this point. We can make it point downward using radiation animation. And when it gets here, we can change the rotation animation so that the car points upwards. So if we have to use rotation animation, you can imagine. We have to create about 4 rotation animations to get this done. But the easiest way is to select the animation and go to the animation properties. We go to this section, keyframe animation using the property Rotration Mode. Let's look it up. Rotation Mode determines whether objects animating along the path, rotate to match the path tangent. So we can change this property from "do not rotate" to "rotate with path". So let's take a look at it again as we move the play head from the initial position. When it comes to the third keyframe, you can see it's just rotated along with this point. And then the other keyframe rotates again. When it comes to this point, it also rotates again before it comes to the destination. So this is how to rotate an object along its motion path. In the next video, we'll look at motion path editing. 14. Using the Pen Tool and Keyframe Animation: Creating and Editing a Complex Motion Path: Hi, welcome to another video of their unlimited apps with kite compositor course. In this video, we'll look at how to use the pen to incarnate to edit complex motion path or task in this video is to move the icon along this complex motion path. By using the pen tool. You can edit animation path and the ship layers, right on the converse. Let's look at how to do that. In the guide, we are going to animate the Car icon. So we select the icon from the layer list. Once we select the icon, we go to the Properties Inspector. We are going to use the position property to animate the car. And using keyframe animation, we will be able to edit the path using the pen tool. Let's click position and select an image position with keyframe animation. We can click on this icon to show the timeline. You can see for me the position animation has been added to the timeline. We go to the Properties Inspector and edit the keyframe position animation. We will go to the section path and click on the gear icon to edit the path along which the Car icon should move, you can choose an SVG path. We're going to create an edit, our own path. So let's select Edit. When we move the mouse across the screen, you're gonna see it has turned into a pen name. That means that we are about to define the path along which the icon should move. You can click in a way to create a path. Let's click outside the screen somewhere here. And click. We're going to move the car from outside the screen and through this complex motion path. So we move to the screen and click and drag somewhere around here. To create a straight point, you have to just click or moved to this section and click on croc again. Then over here, bows also click and drag, and move up. Somewhere at this session. Click and drag again. So I'll repeat that on the Irish, the destination. Once we're done, we can go to the timeline and preview this animation. To release the bend T2, we have to press escape. You can see from media and emission we just added has still been selected. So we go to the Properties Inspector to certain other properties of this animation. These are all the keyframes we just created. And the duration of the animation is also shown in the timeline. Let's go to the section on such some other properties. Let's change repeat count to a larger number so that this animation repeats for a long time. The duration is quite short, so we are going to change it to ten seconds and changed the speed to 0.5. then we leave all the other symptoms as data. We can now go to the tool bar and click present to preview the animation. As the carbon moves along the path, you can see it doesn't rotate. To make the guard rotate along is motion path. We have to set it in one of the properties. By selecting the animation in the layer list. We'll go to the Properties Inspector. Over here, you can see we have this parameter, rotation mode. It has three options. Do not rotate. So that if the object is moving on the path, it doesn't rotate at all. Let's choose rotate with path. Not to make this object routed along is motion path. By presenting, again, you can now see the car is rotating along the motion path. In some cases, the object may move off the road. In that case, you can store editor animation by using the timeline and the Pen tool. Let's modify this buffet, but you can see over here the playhead is at 0 seconds. By going into the properties inspector, we can click on the gear icon again and select edit above. We can drag and position each of the cubic busier points at any position we want. For example, if we want the initial point to move up, we can just crack on position it anyway. We can also preview where the car is at any point on the road. So anywhere the car off the road, we can just reposition the point horizontal here. If you don't like the point to be at this position, you can move it anywhere you want. And it will just move along that path. Let's press on do this. How to use the pen tool in kite along with keyframe animation to create an edit complex motion path. Here inside guide. 15. Using Dash Phase: How to Create an Animated Marching Ants: Hi. In this video, we take a look at how to move dashed stroke along its path. When we look at the road along which the car moves, the dashed stroke moves along the path. We call this Matching Ants. In this video, we are taking a look at how to move the dashed stroke along its path so that we create an animated matching. The stroke is shown in the layer list as path 5. Let's rename the path to "road". In order to make the dashes moved along its path, we have to use the property called Dash Phase. Using the dash phase, we will be able to use animation to move the dashes along its path. You can see over here in the layer list, I have selected the layer. So we can go to the Properties Inspector and use the slider. You're gonna see as we move it from left to right. The stroke also moves along. We'll set this to 0 as before. When I click on the dash phase, you can see it is animatable so we can animate the lines dash phase with basic animation. Keyframe animation or spring animation. Let's choose keyframe animation. What we have to do next, is to define the keyframes over here. We're going to start this value from minus -100. And also, end at 100. Our next job is to define the timing. Over here, we change the repeat count to a larger value. So we repeat the animation so many times. Let's change the duration from 2 to 10 and also change the speed to 0.5. We can now go to the timeline and use the Playhead to preview the animation we just created. Or click on the icon to play the animation. So you can see over here, we have the dashes moving from the top to the left. So this how to use the line phase of a shape layer to create an animated marching ants effect in kite Compositor. 16. Using Stroke-start and Stroke-end: How to Create a Write-on Animation: Hi, in this video and the one that follows this video, we're going to take a look at how to create the notes animation that consists of the pencil animation and the drawing, animation of the notes icon. So let's get started. In this project, we are interested in the Notes icon on the pencil icon. Let's zoom in by pressing Command and +. You can see here we have the notes icon and a pencil. This is a combined shape. So the pencil icon the notes icon are put together. But the animation we have to create consists of two animations. We have to animate the pencil separately and animate the note icon separately. So we have to put the pencil icon and note icon apart. They shouldn't be together. We can use the basic drawing tool draw, to draw the note icon and use an SF Symbol for the pencil. Let's press V and start to draw the note icon. I'll click here to draw a straight point. I'll go to the left. Click again to draw another point. I'll come down and click here. Go to the right. Click, and on the top. I'll click again and move to the left and click here. Since we are done, we can press escape. To let go the tool, we can go to the shape properties and edit the shape. Over here. Let's go to the line cup. Let's changed from line butt and select "Round". We want to round the opened edges of the shape we just drew and also change line join to round. We can create the drawing animation I showed in the beginning of this video using the stroke-start and the stroke-end property. The stroke-start defines where the stroke begins from. And the stroke n defines where the stroke and stroke stat is always 0. As we drag the slider and it moves towards 1, you're gonna see its width reduces. The stroke n is 1. As we move the slider to the left, you can see it's width also reduces. We can use any one of these stroke-start or the stroke-end to create the drawing animation. We are interested in the stroke start. Let's use the stroke start to create this animation by clicking that. We're going to select basic animation, keyframe animation, or spring animation. Let's select keyframe animation. You can see from the layer list, we have this animation object added to the shape. And its properties are shown in the Properties Inspector. You can see we have the animation property as stroke start. Let's go to this section, Keyframes. This is where we define the keyframe values. So we have the initial keyframe and the final keyframe. Let's leave the initial keyframe as 0 and the change, the final keyframe to 1. The next is the animation options. We will leave the settings as they are and move to the timing. Under timing, the properties we are interested in is repeat count. That is the number of iterations we want this animation to undergo. We change it from 0 to a larger value. Then next, is duration. Let's change it from 0 to 4 and change the speed to 1.8. We can now go to the timeline and click on the Payhead to the right to preview this animation. We can also play this animation by clicking on the play icon. So, this is how to create the drawing animation of the notes icon. In the next video, I'll show you how to create the pencil animation. 17. Using Keyframe Animation: Building a Pencil Drawing Animation: Hi, in the previous video, we learned how to create an animation of the note icon. In this video, we learn how to animate the pencil icon. So let's get started. In this project, when we go to the layer list, you can see we have the pencil icon here. This is an SF Symbol. When you bring SF Symbols into Kite, they will show as text because they are icon fonts. Let's look at how to bring an SF Symbol into Kite. We're going to bring the SF Symbol app. You can see over here, we have these icons. The one that is used in the Kite project is this one. By selecting the icon, you can drag the icon directly into your Kite project. You can see here it is shown as text. We can go here and change the color. And also, we can change the size. If I expand the bounding box. You're going to see we have the icon here. So this is the same icon we have in this project. Let's delete this one. The pencil consists of two animations, position, and rotation. To create the pencil animation, we go to the layer list and select the pencil icon. We can control-click and insert animation from Insert and go to the section, Animatioins. Let's first add the position animation by selected keyframe animation. We can now go to the animation properties to set the keyframe animation properties. Let's go to the section path. We are going to define custom path along which the pencil icon will move. So we're going to trace this icon, that is the note icon. We can edit the path by going to the path section and click on the gear icon and select edit path. That turns the mouse cursor into a pen nib. This means that we are about to draw. So we can click to trace this path. I'll click here to define the first point. Go to the left and click again, or move downward, and repeat the process. In order to complete the path. Once we are done, we can press escape to let go the to. By going to the timeline, you can drag the Playhead to preview the animation we just created. You can see the pencil icon follows the drawing. We are going to select the pencil icon, control-click and go to Insert, go to the section animations and select keyframe. We are going to create a rotation animation. So we go to the animation properties and change the keyframe animation property to rotation. We can find rotation under transform and choose rotation. The property we are interested in is the Z property. So we have to set the values of the keyframes. We have the initial keyframe and a final keyframe. Let's leave the initial keyframe are 0. So we have 0 rotation at the beginning of the animation and the final state of the animation, -85 in degrees. But we cannot put degrees in this field. Because Kite doesn't accept degrees, we have to convert 85 degrees to radians. Then open the browser. You can see over here, I have radians to degrees converter. So 85 degrees is equivalent to 1.5 in radians. So we can come to kite and change this to -1.5 and change repeat count to a larger value. We can now go to the timeline on drag the Playhead to preview the animation. So, you can see as the pencil moves, it also rotates. Let's press Command 0 to zoom out. And preview again. So you can see from here, we have been able to use position animation to move the pencil icon along the path. And also is used rotation animation to rotate the pencil icon as it moves along the path. 18. How to Emit, Animate and Render Particles Using Emitter Layers: Hi, in this video, we'll look at how to emit, animate and render particles in the Kite. At the end of this video, you'll be able to render and generate the snow. So let's start with creating particle emission in Kite. In this project, we're going to use the emitter layers in Kite to generate synthetic snow to fall from the top of the screen to the bottom of the screen. We can add the emitter layers in Kite by going to the library. In the library, you can find this layer emitter. You can drag this layer and put it anywhere on the canvas. Let's resize the emitter layer by dragging and the bounding box so that it takes the whole screen. You can see from the layer list, the emitter layer is on top of the map. The map contains all the items on the screen. So we have to move the emitter layer and put it inside the map so that the contents of the emitter layer are clipped to the parent container, which is a map. Using the emitter layers, we have to put two settings, one for the emitter and one for the emitter cell. Let's start from the emitter. The best way to learn about the emitter layers in the Kite is to play around with all the settings. The settings for the emitter and also, all the settings for the emitter cell. So the best way to understand how the emitter works is to play around with all the settings. Let's go to the render mode. And it changed from additive to unordered. We want to generate the snow as an unordered particle. Let's change the X position of the emitter from 50 to 207 and leave the Y property as it is. The next property we will set is the birth rate. We will change it from 1 and put ten and change velocity to 0.5. Scale to 0.5. We will change the spin 2, The lifetime to 0.05. The seed, we change it to 1. We can also remove the background. If we present, you can see we have the particles and the background is green. Let's remove the background. We can do so by going into Appearance. Over here, you can see we have the background color on the border color. Let's drag the slider to remove the background. And also drag the border to 0. To remove the border. If we go to the toolbar and click Present, you can see we have the particles. So these are all the settings for the emitter. In the next video, we will take a look at how to add settings for the emitter cell so that we generate the snow. So see you in the next video. 19. How to Generate and Animate Snow: Hi, in the previous video, we looked at how to add settings for the emitter. In this video, we'll look at how to add the settings for the emitter cell. Before we begin, let's look at what we have. You can see the emission take place at the top center of the screen. We need to set the emitter cell so that the snow falls from the top to the bottom and also change the color of the snow using the emitter cell. You can see from the layer list we have selected the emitter cell and the properties of the emitter cell shown in the Properties Inspector, I said in the previous video, the best way to learn about the emitter layers in Kite is to play around with all the settings for the emitter cell. This is done by experimenting with all the properties. You can use this emitter to create something like fire, snow effect or fireworks. We will live all the settings as they are. But those that are important are the color and also, the settings under Acceleration. Since we want to generate and render snow, we will change the color from green to white, which is snow. Then we go to the acceleration. We use a celebration to define the direction where we want the snow to move from. You can see here we have this z acceleration, so to 50. As we present. You can see the snow is emitted in one position. We can make the snow move in different directions using the X and Y positions. Let's change the X position and present. You can see the snow is moving from the top center to the left. By changing the acceleration to a positive number. You can see from here, the snow is moving from the center of the screen towards the right. In this animation, we want the snow to be generated from the top to the bottom of the screen. We will set the X acceleration to 0 and change the Y. If we present again, you can see the snow is known descending from the top of the screen to the bottom of the screen. You can see for me the snow is shown only in the center. We don't have this snow at the edges. But we can change that. We do that by going to the parent container, which is the emitter. From the Properties Inspector, We have the emitter size. You can see here, it is set to 100, that is the width of 100 and a height of 100. We can change the width so that it has the same size as the screen. If I select the map, you can see from here the screen has a width of 414. So let's select the emitter and change the emitter size from 100 to 414. If we present, again, you can see from here the snow is emitted on the entire screen. So this is how to use the emitter layers in Kite to create particles emission. You can use the emitter layers in Kite to create emissions like fire, snow, or fireworks.