[ PROMPT_NODE_27761 ]
Motion Canvas – Animations
[ SKILL_DOCUMENTATION ]
# Animations in Motion Canvas
Motion Canvas uses a property-based animation system where you tween individual properties over time using generator functions.
## Basic Property Animation
```typescript
import {makeScene2D} from '@motioncanvas/2d/lib/scenes';
import {Circle} from '@motioncanvas/2d/lib/components';
import {createRef} from '@motioncanvas/core/lib/utils';
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Animate size from current value (100) to 200 over 1.5 seconds
yield* circle().size(200, 1.5);
});
```
## Multiple Property Animation
Animate several properties at once:
```typescript
import {all} from '@motioncanvas/core/lib/flow';
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Animate multiple properties simultaneously
yield* all(
circle().size(200, 1.5),
circle().position.x(300, 1.5),
circle().fill('#e6a700', 1.5),
);
});
```
## Easing Functions
Control animation curves with easing:
```typescript
import {easeInOutCubic, easeInBounce} from '@motioncanvas/core/lib/tweening';
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Use cubic easing
yield* circle().size(200, 1.5, easeInOutCubic);
// Use bounce easing
yield* circle().position.y(200, 1, easeInBounce);
});
```
## From-To Animation
Specify both start and end values explicitly:
```typescript
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Animate from 50 to 200
yield* circle().size(200, 1.5).from(50);
// Or use the longer syntax
yield* tween(1.5, value => {
circle().size(map(50, 200, value));
});
});
```
## Looping Animations
Create repeating animations:
```typescript
import {loop} from '@motioncanvas/core/lib/flow';
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Loop 3 times
yield* loop(3, () => circle().size(200, 1).to(100, 1));
// Infinite loop
yield* loop(Infinity, function* () {
yield* circle().rotation(360, 2);
});
});
```
## Chain Animations
Sequence animations fluently:
```typescript
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Chain multiple tweens
yield* circle()
.size(200, 1)
.to(150, 0.5)
.to(100, 0.5);
});
```
## Relative Animations
Animate relative to current value:
```typescript
export default makeScene2D(function* (view) {
const circle = createRef();
view.add();
// Move 100 pixels to the right (relative)
yield* circle().position.x(circle().position.x() + 100, 1);
// Or use the .by() method
yield* circle().position.x(100, 1).by();
});
```
## Resources
- [Motion Canvas Animation Documentation](https://motioncanvas.io/docs/flow/)
- [Easing Functions Reference](https://motioncanvas.io/docs/tweening/)