lottie-bodymovin

Name: lottie-bodymovin
Author: calesthio

41kstars4.9kforks

How to install lottie-bodymovin?

calesthio/openmontage/lottie-bodymovin

$npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin

Installs into the current project.

Summary

Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects

Files · 1

View on GitHub

SKILL.md

1	# Lottie Animation Principles
2
3	Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.
4
5	## 1. Squash and Stretch
6
7	In After Effects before export:
8	- Animate Scale X and Y inversely
9	- Use expression: `s = transform.scale[1]; [100 + (100-s), s]`
10
11	```javascript
12	// Control at runtime
13	lottie.setSpeed(1.5); // affect squash timing
14	```
15
16	## 2. Anticipation
17
18	Structure your AE composition:
19	1. Frames 0-10: Wind-up pose
20	2. Frames 10-40: Main action
21	3. Frames 40-50: Settle
22
23	```javascript
24	// Play anticipation segment
25	anim.playSegments([0, 10], true);
26	setTimeout(() => anim.playSegments([10, 50], true), 200);
27	```
28
29	## 3. Staging
30
31	```javascript
32	// Layer multiple Lotties
33	<div className="scene">
34	<Lottie animationData={background} style={{ opacity: 0.6 }} />
35	<Lottie animationData={hero} style={{ zIndex: 10 }} />
36	</div>
37	```
38
39	## 4. Straight Ahead / Pose to Pose
40
41	Pose to pose in AE:
42	- Set keyframes at key poses
43	- Let AE interpolate between
44	- Use Easy Ease for smoothing
45
46	```javascript
47	// Jump to specific poses
48	anim.goToAndStop(25, true); // frame 25
49	```
50
51	## 5. Follow Through and Overlapping Action
52
53	In After Effects:
54	- Offset child layer keyframes by 2-4 frames
55	- Use parenting with delayed expressions
56	- `thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)`
57
58	## 6. Slow In and Slow Out
59
60	AE Keyframe settings:
61	- Select keyframes > Easy Ease (F9)
62	- Use Graph Editor to adjust curves
63	- Bezier handles control acceleration
64
65	```javascript
66	// Adjust playback speed dynamically
67	anim.setSpeed(0.5); // slower
68	anim.setSpeed(2); // faster
69	```
70
71	## 7. Arc
72
73	In After Effects:
74	- Use motion paths (position property)
75	- Convert keyframes to Bezier
76	- Pull handles to create arcs
77	- Or use "Auto-Orient to Path"
78
79	## 8. Secondary Action
80
81	```javascript
82	// Trigger secondary animation
83	mainAnim.addEventListener('complete', () => {
84	secondaryAnim.play();
85	});
86
87	// Or sync with frame
88	mainAnim.addEventListener('enterFrame', (e) => {
89	if (e.currentTime > 15) particleAnim.play();
90	});
91	```
92
93	## 9. Timing
94
95	```javascript
96	anim.setSpeed(0.5); // half speed - dramatic
97	anim.setSpeed(1); // normal
98	anim.setSpeed(2); // double speed - snappy
99
100	// Or control frame rate in AE export
101	// 24fps = cinematic, 30fps = smooth, 60fps = fluid
102	```
103
104	## 10. Exaggeration
105
106	In After Effects:
107	- Push scale beyond 100% (120-150%)
108	- Overshoot rotation
109	- Use Overshoot expression
110	- `amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freqn) / Math.exp(decayn/100); } else { 0; }`
111
112	## 11. Solid Drawing
113
114	In After Effects:
115	- Use 3D layers
116	- Apply perspective camera
117	- Animate Z position and rotation
118	- Use depth of field
119
120	## 12. Appeal
121
122	Design principles in AE:
123	- Smooth curves over sharp angles
124	- Consistent timing patterns
125	- Pleasing color palette
126	- Clean vector shapes
127
128	```javascript
129	// React Lottie with hover
130	<Lottie
131	animationData={data}
132	onMouseEnter={() => anim.setDirection(1)}
133	onMouseLeave={() => anim.setDirection(-1)}
134	/>
135	```
136
137	## Lottie Implementation
138
139	```javascript
140	import Lottie from 'lottie-react';
141	import animationData from './animation.json';
142
143	<Lottie
144	animationData={animationData}
145	loop={true}
146	autoplay={true}
147	style={{ width: 200, height: 200 }}
148	/>
149	```
150
151	## Key Lottie Features
152
153	- `playSegments([start, end])` - Play frame range
154	- `setSpeed(n)` - Control timing
155	- `setDirection(1/-1)` - Forward/reverse
156	- `goToAndStop(frame)` - Pose control
157	- `addEventListener` - Frame events
158	- Interactivity via `lottie-interactivity`

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

lottie-bodymovin

41kstars4.9kforks

View on GitHub

How to install lottie-bodymovin?

calesthio/openmontage/lottie-bodymovin

$npx -y skills add calesthio/OpenMontage --skill lottie-bodymovin

Installs into the current project.

Summary

Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects

Files · 1

View on GitHub

SKILL.md

1	# Lottie Animation Principles
2
3	Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.
4
5	## 1. Squash and Stretch
6
7	In After Effects before export:
8	- Animate Scale X and Y inversely
9	- Use expression: `s = transform.scale[1]; [100 + (100-s), s]`
10
11	```javascript
12	// Control at runtime
13	lottie.setSpeed(1.5); // affect squash timing
14	```
15
16	## 2. Anticipation
17
18	Structure your AE composition:
19	1. Frames 0-10: Wind-up pose
20	2. Frames 10-40: Main action
21	3. Frames 40-50: Settle
22
23	```javascript
24	// Play anticipation segment
25	anim.playSegments([0, 10], true);
26	setTimeout(() => anim.playSegments([10, 50], true), 200);
27	```
28
29	## 3. Staging
30
31	```javascript
32	// Layer multiple Lotties
33	<div className="scene">
34	<Lottie animationData={background} style={{ opacity: 0.6 }} />
35	<Lottie animationData={hero} style={{ zIndex: 10 }} />
36	</div>
37	```
38
39	## 4. Straight Ahead / Pose to Pose
40
41	Pose to pose in AE:
42	- Set keyframes at key poses
43	- Let AE interpolate between
44	- Use Easy Ease for smoothing
45
46	```javascript
47	// Jump to specific poses
48	anim.goToAndStop(25, true); // frame 25
49	```
50
51	## 5. Follow Through and Overlapping Action
52
53	In After Effects:
54	- Offset child layer keyframes by 2-4 frames
55	- Use parenting with delayed expressions
56	- `thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)`
57
58	## 6. Slow In and Slow Out
59
60	AE Keyframe settings:
61	- Select keyframes > Easy Ease (F9)
62	- Use Graph Editor to adjust curves
63	- Bezier handles control acceleration
64
65	```javascript
66	// Adjust playback speed dynamically
67	anim.setSpeed(0.5); // slower
68	anim.setSpeed(2); // faster
69	```
70
71	## 7. Arc
72
73	In After Effects:
74	- Use motion paths (position property)
75	- Convert keyframes to Bezier
76	- Pull handles to create arcs
77	- Or use "Auto-Orient to Path"
78
79	## 8. Secondary Action
80
81	```javascript
82	// Trigger secondary animation
83	mainAnim.addEventListener('complete', () => {
84	secondaryAnim.play();
85	});
86
87	// Or sync with frame
88	mainAnim.addEventListener('enterFrame', (e) => {
89	if (e.currentTime > 15) particleAnim.play();
90	});
91	```
92
93	## 9. Timing
94
95	```javascript
96	anim.setSpeed(0.5); // half speed - dramatic
97	anim.setSpeed(1); // normal
98	anim.setSpeed(2); // double speed - snappy
99
100	// Or control frame rate in AE export
101	// 24fps = cinematic, 30fps = smooth, 60fps = fluid
102	```
103
104	## 10. Exaggeration
105
106	In After Effects:
107	- Push scale beyond 100% (120-150%)
108	- Overshoot rotation
109	- Use Overshoot expression
110	- `amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freqn) / Math.exp(decayn/100); } else { 0; }`
111
112	## 11. Solid Drawing
113
114	In After Effects:
115	- Use 3D layers
116	- Apply perspective camera
117	- Animate Z position and rotation
118	- Use depth of field
119
120	## 12. Appeal
121
122	Design principles in AE:
123	- Smooth curves over sharp angles
124	- Consistent timing patterns
125	- Pleasing color palette
126	- Clean vector shapes
127
128	```javascript
129	// React Lottie with hover
130	<Lottie
131	animationData={data}
132	onMouseEnter={() => anim.setDirection(1)}
133	onMouseLeave={() => anim.setDirection(-1)}
134	/>
135	```
136
137	## Lottie Implementation
138
139	```javascript
140	import Lottie from 'lottie-react';
141	import animationData from './animation.json';
142
143	<Lottie
144	animationData={animationData}
145	loop={true}
146	autoplay={true}
147	style={{ width: 200, height: 200 }}
148	/>
149	```
150
151	## Key Lottie Features
152
153	- `playSegments([start, end])` - Play frame range
154	- `setSpeed(n)` - Control timing
155	- `setDirection(1/-1)` - Forward/reverse
156	- `goToAndStop(frame)` - Pose control
157	- `addEventListener` - Frame events
158	- Interactivity via `lottie-interactivity`

People who liked this also viewed

6 picks

Type