Updated getting-started.mdx

src/content/docs/usage/Animating/getting-started.mdx

@@ -1,6 +1,6 @@
 ---
 title: Getting Started with Animations
-description: Learn animation basics in PixiEditor.
+description: Learn the basics of animation in PixiEditor and explore two main approaches to animating your projects
 
 sidebar:
   order: 1
@@ -9,76 +9,96 @@ sidebar:
     variant: tip
 ---
 
-import timelineImg from 'assets/timeline.png';
+import timelineImg from 'assets/annotated-timeline.png';
 import { Image } from 'astro:assets';
 
 
-PixiEditor offers two main ways to animate your projects: **Frame by Frame** and **Procedurally**.
-Both methods can be used together freely.
+# Getting started with animations
+Welcome to PixiEditor. This guide introduces key animation concepts and walks you through the two main ways you can animate your projects:   
+- Frame-by-Frame
+- Procedural animation.
 
-## Timeline
+---
+
+## Understanding the timeline
+
+The timeline is the most important component of animation in PixiEditor. It controls every aspect of your animation flow, including frames, layers, and playback speed.
 
-The timeline is the most important component of animation in PixiEditor. Everyting related to animation is managed there.
+You can open the timeline in either of these ways:
+- Click the **Timeline** icon <span className="pixi-icon icon-timeline"/> on the toolbar at the top of the screen.  
+- Go to **View**, choose **Open Tab** and then choose **Timeline**.
 
-You can access the timeline by pressing <span className="pixi-icon icon-timeline"/> button on top of the screen.
+### Timeline interface overview
+The following image shows the interface of the timeline.
+  ![The timeline interface](./img/annotated-timeline.png "The timeline interface")
 
-or by going to `View -> Open Tab -> Timeline` menu.
 
-<Image src={timelineImg} alt="An image of timeline UI"/>
+1. **Frames per second (FPS)**  
+    Controls how fast your animation plays. Higher values produce smoother result but require more frames.
+    - 60 FPS- Smooth animation (common in games)  
+    - 24 FPS - Industry standard for films 
 
-1. **Frames per second setting** - how fast timeline should play the animation. Higher values require more frames for the same amount of time, but produces smoother result.
 
-    The usual values are:
-    - 60 - for smooth animation, usually used in games
-    - 24 - movie industry standard
+2. <span className="pixi-icon icon-settings"/> **Settings** - opens a menu with timeline related-settings.
 
-2. <span className="pixi-icon icon-settings"/> **Settings** - opens a menu with timeline related-settings
 3. **Action buttons**
 
-- <span className="pixi-icon icon-plus-square"/> - Add an empty cel to the currently selected layer
-- <span className="pixi-icon icon-duplicate"/> - Creates a duplicated cel to the currently selected layer. Duplicates the content under active frame.
-- <span className="pixi-icon icon-onion"/> - Toggles on/off onion skinning
-- <span className="pixi-icon icon-trash"/> - Deletes all selected cels
+    - <span className="pixi-icon icon-plus-square"/> **Plus icon** - Adds an empty cel to the selected layer
+    - <span className="pixi-icon icon-duplicate"/> **Duplicate icon** - Duplicates the current cel
+    - <span className="pixi-icon icon-onion"/> **Onion icon** - Toggles onion skinning on/off
+    - <span className="pixi-icon icon-trash"/> **Trash icon** - Deletes selected cels
 
-4. **Layer**
+4. **Layers panel**
 
-    From the left to the right:
+    From left to right:
 
-- <span className="pixi-icon icon-eye"/> - Disable whole animation for layer.
-- Image Preview - It displays the layer's **base** image.
-- Layer Name
-- <span className="pixi-icon icon-chevron-down"/> Collapse button, it squishes whole layer animation row, so it takes minimal space.
+    - <span className="pixi-icon eye-icon"/> **Eye icon** - Show/hide the layer
+    - **Image thumbnail** - Displays the layer's base image
+    - **Layer name** - Name of the layer (e.g., *Slime*) 
+    - <span className="pixi-icon icon-chevron-down"/> **Collapse button** - Minimize the layer to save space
 
-5. **Playback buttons**
+5. **Playback controls**
 
-- <span className="pixi-icon icon-step-start"/> - Moves the frame cursor back to the edge of the closest cel.
-- <span className="pixi-icon icon-step-back"/> - Moves the frame cursor back one frame.
-- <span className="pixi-icon icon-play" style={{color: "#6fac6f"}}/> - Plays the animation
-- <span className="pixi-icon icon-step-forward"/> - Moves the frame cursor forward one frame.
-- <span className="pixi-icon icon-step-end"/> - Moves the frame cursor forward to the edge of the closest cel.
-- `00:00.08/00:01.75` - `current time` / `end time` in `mm:ss.ff` format where `mm` - minutes, `ss` - seconds, `ff` - hundredths of a second
+- <span className="pixi-icon icon-step-start"/> Step start - Moves the frame cursor back to the edge of the closest cel.
+- <span className="pixi-icon icon-step-back"/> Step Back - Moves the frame cursor back one frame.
+- <span className="pixi-icon icon-play" style={{color: "#6fac6f"}}/> Play- Plays the animation
+- <span className="pixi-icon icon-step-forward"/> Step Forward - Moves the frame cursor forward one frame.
+- <span className="pixi-icon icon-step-end"/> Step End - Moves the frame cursor forward to the edge of the closest cel.
+- **00:00.08 / 00:01.75** – Current time and total time in `mm:ss.ff` format. `mm` for minutes, `ss` for seconds, `ff` for hundredths of a second  
 
-6. **Frame Bar** 
+6. **Frame bar** 
+    This is the top slider that lets you:
+   - Drag to change the active frame  
+   - Zoom in/out by scrolling over it
+   - View frame numbers and ticks
 
-    The frame bar is the top part of the timeline viewport. It displays frame cursor, frame ticks and frame numbers. It is essentially a slider. You can click and drag to change active frame. You can zoom in our out by scrolling over it.
+7. **Cel row**
+    Displays all cels in a layer. Each cel shows a thumbnail preview and duration.  
+   - Drag the edges to change the cel’s length  
+   - Drag the cel itself to move it along the timeline  
+
+---
 
-7. **Cel Row**
+## Animating projects
+PixiEditor supports two main animation methods:
 
-    Cel row displays all cels within the layer. One cel consists of a preview image and cel length rectangle (how many frames a cel should occupy) that can be shortened or lengthened by dragging the edges. You can also drag the whole cel to move it around.
+### 1. Frame-by-Frame animation
 
-## Frame by Frame Animations
+The traditional method of animation. You draw each frame manually to create smooth transitions.
 
-Frame by frame animation is a traditional method of animating. It involves drawing each frame by hand.
+> To learn more, check [Frame-by-Frame Animations](/docs/usage/animating/frame-by-frame/). 
 
-For more information, check out a [dedicated guide](/docs/usage/animating/frame-by-frame)
 
-## Procedural Animations
+### 2. Procedural animations
+This method uses operations and parameters to create movement without manually drawing frames. Think of it as giving a set of instructions. For example: *Move to the right by 10 pixels over 1 second.*  
+With this method, you can animate almost any property within the Node graph.  
 
-PixiEditor gives full freedom over animations, meaning you can animate almost any property within the [Node Graph](/docs/usage/node-graph/getting-started-with-node-graph). 
-It does not involve any manual drawing, unlike frame by frame animations, but is rather a result of combining operations and parameters.
+> To learn more, check: 
+> - [Procedural animation](/docs/usage/animating/procedural/).  
+> - [Node graph](/docs/usage/node-graph/getting-started-with-node-graph)
 
-Think of it as a set of instructions.
 
-`Move to the right by 10 pixels over 1 second`
 
-For more information, check out a [dedicated guide](/docs/usage/animating/procedural)
+:::tip  
+You can combine both methods for more dynamic results. For example, use frame-by-frame for character movement and procedural animation for background effects.   
+:::