Flames have fascinated us for centuries with their mesmerizing dance of colours and movement. It's like nature's own animator, and if you're looking to up your animation game, there's no better subject than a flame to practice your path animation skills. In this tutorial, we'll take a quick journey into designing and animating a blazing flame using Lottielab.

Design a flame🔥

1. Drawing Flames and Painting Them Orange:
   
   Flame can be complex, but we'll start simple.
   
   In the Lottielab editor, let's grab our trusty Pen Tool and start sketching out the shape of our flame. You can make it wavy, flickery, and as fiery as you can imagine. Next, let’s give it an orange fill to give it that fiery appearance.

   
   

Keys that will be helpful in this part;

• Pressing Return / Enter takes you to edit path mode,

• Holding Shift makes the handle move to specific angles,

• Holding Option / Alt disables mirror editing on the handles,

• Both combined, holding Shift + Option / Shift + Alt disables mirror editing on the handles and snaps you to specific angles,

• If it is a point with no handles or is not curved, hold Command / Ctrl and click to the point, this will curve the point and show its handles.

  
  

  
  

  (You can do this part on Figma and import it in Lottielab as SVG but for now, I’ll do everything within Lottielab 👌)
  
  

You go flame🔥, swayyyy!

2. Alright, before we make it “swayyyyy”, let's make sure our animation loops seamlessly. It's as simple as making the first keyframe the same as the last keyframe.
   
   Toggle on Animation Mode, and select our flame, In the timeline we can see its first keyframe.
   
   Press and hold Option / Alt while clicking on the first keyframe. This duplicates the keyframe. Now, just drag the copy to the end of the timeline. Easy-peasy!

   
   

   
   

3. Time for our flames to bust a move! Move your playhead to another point in time, and start editing the path points. Each change you make to where the playhead is creates a new keyframe. Keep it natural, keep it groovy – that's how we bring those flames to life!
   
   

   
   

4. To make our flames look even more natural, we need to add some finesse to the transitions between keyframes.
   
   Hover over in between the keyframes, and there you can find an entry to edit the easing.

   
   

   
   
   

5. Real flames aren't just one colour, they have layers✨
   
   Toggle off Animate Mode, and duplicate your flame layer (Ctrl + D / Command + D). Now, change its colour and shrink down the duplicate to create that hotter, yellowish core of your flame.
   
   To add depth to your animation, don't forget to play with timing.
   
   Toggle on Animate Mode and offset the keyframes of your yellow flames slightly from the orange ones. This small lag will make it look like the yellow part of your flames is playing catch-up with the orange flame.
   
   

Ta-da! There you go, that's how you make a flame animation in Lottielab.

In this short tutorial, you've not only mastered the art of path animation but also breathed life into flames that dance and flicker with elegance.