Lottie animations support various animation types and effects. Here is a detailed classification and explanation:
1. Basic Animation Types
Position Animation
{ "p": { "a": 1, "k": [ { "i": {x: 0.833, y: 0.833}, "o": {x: 0.167, y: 0.167}, "t": 0, "s": [100, 100, 0] }, { "t": 60, "s": [400, 300, 0] } ] } }
Scale Animation
{ "s": { "a": 1, "k": [ { "t": 0, "s": [100, 100, 100] }, { "t": 60, "s": [150, 150, 100] } ] } }
Rotation Animation
{ "r": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 360 } ] } }
Opacity Animation
{ "o": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 30, "s": 100 }, { "t": 60, "s": 0 } ] } }
2. Shape Animations
Path Morphing Animation
{ "ks": { "k": [ { "t": 0, "i": [[0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0]], "v": [[0, 0], [100, 0], [100, 100]] }, { "t": 60, "i": [[0, 0], [0, 0], [0, 0]], "o": [[0, 0], [0, 0], [0, 0]], "v": [[50, 50], [150, 50], [150, 150]] } ] } }
Rounded Rectangle Animation
{ "ty": "rc", "r": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 20 } ] } }
Ellipse Animation
{ "ty": "el", "s": { "a": 1, "k": [ { "t": 0, "s": [50, 50] }, { "t": 60, "s": [100, 80] } ] } }
Star and Polygon Animation
{ "ty": "sr", "pt": { "a": 1, "k": [ { "t": 0, "s": 5 }, { "t": 60, "s": 8 } ] }, "or": { "a": 1, "k": [ { "t": 0, "s": 50 }, { "t": 60, "s": 80 } ] } }
3. Color and Gradient Animations
Fill Color Animation
{ "ty": "fl", "c": { "a": 1, "k": [ { "t": 0, "s": [1, 0, 0, 1] // Red }, { "t": 60, "s": [0, 0, 1, 1] // Blue } ] } }
Stroke Color Animation
{ "ty": "st", "c": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0, 1] }, { "t": 60, "s": [1, 1, 1, 1] } ] } }
Gradient Animation
{ "ty": "gf", "g": { "p": 1, // Linear gradient "k": { "a": 1, "k": [ { "t": 0, "g": [ { "p": 0, "c": [1, 0, 0, 1] }, { "p": 1, "c": [0, 0, 1, 1] } ] }, { "t": 60, "g": [ { "p": 0, "c": [0, 1, 0, 1] }, { "p": 1, "c": [1, 1, 0, 1] } ] } ] } } }
4. Text Animations
Text Content Animation
{ "ty": 1, "t": { "d": { "k": [ { "t": 0, "s": { "t": "Hello", "f": "Arial", "s": 50, "j": 1, "tr": 0, "lh": 60, "ls": 0, "fc": [0, 0, 0, 1] } }, { "t": 60, "s": { "t": "World", "f": "Arial", "s": 50, "j": 1, "tr": 0, "lh": 60, "ls": 0, "fc": [0, 0, 0, 1] } } ] } } }
Text Tracking Animation
{ "t": { "d": { "k": [ { "t": 0, "s": { "t": "Hello", "ls": 0 } }, { "t": 60, "s": { "t": "Hello", "ls": 50 } } ] } } }
5. 3D Transform Animations
3D Rotation Animation
{ "rx": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 180 } ] }, "ry": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 90 } ] }, "rz": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 45 } ] } }
6. Mask and Matte Animations
Mask Path Animation
{ "ty": "mask", "pt": { "a": 1, "k": [ { "t": 0, "i": [[0, 0], [0, 0]], "o": [[0, 0], [0, 0]], "v": [[0, 0], [100, 0], [100, 100], [0, 100]] }, { "t": 60, "i": [[0, 0], [0, 0]], "o": [[0, 0], [0, 0]], "v": [[50, 50], [150, 50], [150, 150], [50, 150]] } ] } }
Mask Opacity Animation
{ "ty": "mask", "o": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 100 } ] } }
7. Effect Animations
Shadow Effect Animation
{ "ty": 25, "nm": "Drop Shadow", "ef": [ { "ty": 1, "nm": "Shadow Color", "v": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0, 0.5] }, { "t": 60, "s": [1, 0, 0, 0.8] } ] } }, { "ty": 0, "nm": "Shadow Distance", "v": { "a": 1, "k": [ { "t": 0, "s": 5 }, { "t": 60, "s": 20 } ] } } ] }
Blur Effect Animation
{ "ty": 0, "nm": "Gaussian Blur", "ef": [ { "ty": 0, "nm": "Blurriness", "v": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 10 } ] } } ] }
8. Composite Animations
Parent-Child Hierarchy Animation
{ "ty": 0, "parent": 1, "ks": { "p": { "a": 1, "k": [ { "t": 0, "s": [0, 0, 0] }, { "t": 60, "s": [100, 100, 0] } ] } } }
Expression Animation
{ "ks": { "p": { "a": 0, "k": [ { "s": true, "ix": 2, "x": "wiggle(5, 20)" // Random wiggle expression } ] } } }
9. Time Remapping
{ "tm": { "a": 1, "k": [ { "t": 0, "s": 0 }, { "t": 60, "s": 30 } ] } }
10. Easing and Easing Out
{ "ks": { "p": { "a": 1, "k": [ { "i": {x: 0.25, y: 1}, // Ease in "o": {x: 0.75, y: 0}, // Ease out "t": 0, "s": [0, 0, 0] }, { "t": 60, "s": [100, 100, 0] } ] } } }
Summary of Supported Animation Features:
- Basic transforms: position, scale, rotation, opacity
- Shape morphing: path morphing, rounded corners, ellipses, polygons
- Color animations: fill, stroke, gradients
- Text animations: content, size, spacing, color
- 3D transforms: X/Y/Z axis rotation, 3D position
- Masks and mattes: path, opacity, blend modes
- Effects: shadows, blur, glow, etc.
- Composite animations: parent-child hierarchy, expressions
- Time control: time remapping, easing functions