The Transform effect allows you to reposition, scale, and rotate your content within the frame, with advanced blending and motion options.
How it works
Transform applies geometric transformations to your content, including translation (movement), scaling, and rotation. These transformations can be applied independently or combined to create complex positioning effects.
The effect also provides advanced blending options that allow you to control how the transformed content interacts with other layers, making it possible to create sophisticated compositing effects. Additional features like motion blur and texture wrapping give you precise control over how the transformed content appears.
Use cases
- Repositioning, scaling and rotating content within the layer effect chain
- Blending transformed content with specific layers
- Animating content with motion blur
Controllers
Position and scale
| Name | Type | Description | Range |
|---|---|---|---|
| x (Position) | Number | Horizontal position offset | any |
| y (Position) | Number | Vertical position offset | any |
| x (Scale) | Number | Horizontal scaling factor | any |
| y (Scale) | Number | Vertical scaling factor | any |
Position x and y control where your content appears in the frame. Positive x values move content to the right, while negative values move it to the left. Similarly, positive y values move content down, while negative values move it up.
Scale x and y determine the size of your content. Values above 1.0 enlarge the content, while values below 1.0 shrink it. You can create distortion effects by using different values for x and y, such as stretching content horizontally (higher x, normal y) or vertically (normal x, higher y).
Rotation and opacity
| Name | Type | Description | Range |
|---|---|---|---|
| Warp rotation | Number | Rotation angle in degrees | 0-1000 |
| Alpha multiplier | Number | Overall opacity of the transformed content | 0-1 |
Warp rotation rotates the content around its center point, measured in degrees. This allows you to create spinning effects or adjust the orientation of your content. When animated, this parameter can create dynamic rotational movements.
Rotation and motion blur
These two parameters might conflict and produce unexpected results. There is a workaround to use extremely small rotation variations, but in general you should not try to use them together.
Alpha multiplier controls the overall opacity of the transformed content. A value of 1.0 makes the content fully opaque (subject to its original alpha channel), while lower values make it increasingly transparent.
Blending options
| Name | Type | Description | Range |
|---|---|---|---|
| Blend equation | Select | How to blend with the target layer | Add/Subtract/Reverse subtract/Min/Max |
| Source blend factor | Select | Blend factor for the source content | various |
| Dst blend factor | Select | Blend factor for the destination content | various |
| Blend with | Select | Layer to blend the transformed content with | any layer |
Blend equation determines the mathematical operation used to combine source (transformed content) and destination (existing content) pixels
Source blend factor determines how the source (transformed content) is processed before blending
Dst blend factor determines how the destination (existing content) is processed before blending. It uses the same options as Source blend factor but applies to the existing content instead.
Blend with specifies which layer the transformed content should blend with. “Screen” blends with the final output, while selecting a specific layer allows you to blend only with that layer, creating targeted compositing effects.
Blend factors
Simpler blending options
The Blending effect has pre-defined blending modes more similar to industry standard blend modes.
We will cover the blending modes available in the Transform effect, Shader Item, Butterchurn, and anywhere else you see a “Source blend factor” and “Dst blend factor” dropdown.
Source Blending
Defines how the source color contributes to the final blended color. Here are the available options:
- One: The source color comes through fully.
- Zero: The source color does not contribute.
- SrcColor: Multiplies by the source color value.
- SrcAlpha: Multiplies by the source alpha value.
- DstColor: Multiplies by the destination color value.
- DstAlpha: Multiplies by the destination alpha value.
- OneMinusSrcColor: Multiplies by (1 - source color).
- OneMinusSrcAlpha: Multiplies by (1 - source alpha).
- OneMinusDstColor: Multiplies by (1 - destination color).
- OneMinusDstAlpha: Multiplies by (1 - destination alpha).
Destination Blending
Defines how the destination color contributes to the final blended color. The options are similar to source blending:
- One: The destination color comes through fully.
- Zero: The destination color does not contribute.
- SrcColor: Multiplies by the source color value.
- SrcAlpha: Multiplies by the source alpha value.
- DstColor: Multiplies by the destination color value.
- DstAlpha: Multiplies by the destination alpha value.
- OneMinusSrcColor: Multiplies by (1 - source color).
- OneMinusSrcAlpha: Multiplies by (1 - source alpha).
- OneMinusDstColor: Multiplies by (1 - destination color).
- OneMinusDstAlpha: Multiplies by (1 - destination alpha).
For a showcase of a grid of all possible blending modes, you can check out the following Three.js example:
Edge handling
| Name | Type | Description | Range |
|---|---|---|---|
| Texture wrap | Select | How to handle content at edges | Repeat/Clamp/Discard |
| Reverse mirror | Select | How to mirror repeated content | Default/Vertical/Horizontal/Both/Either |
Texture wrap determines how to handle content at edges when transformation moves beyond original boundaries:
- Repeat: Tiles the image to fill empty areas, creating a repeating pattern
- Clamp: Stretches edge pixels to fill empty areas, creating a stretched edge effect
- Discard: Shows empty space (transparent), allowing background content to show through
Reverse mirror controls how repeated content is mirrored when Texture wrap is set to Repeat. This only applies when Texture wrap is set to Repeat:
- Default: Standard repetition without mirroring
- Vertical: Flips vertically at boundaries, creating a mirror effect top-to-bottom
- Horizontal: Flips horizontally at boundaries, creating a mirror effect left-to-right
- Both: Flips both horizontally and vertically, creating a kaleidoscope-like effect
- Either: Alternates between horizontal and vertical flipping
Motion blur
| Name | Type | Description | Range |
|---|---|---|---|
| Motion blur | Boolean | Enables motion blur effect | - |
| Blur spread | Number | Controls the length of motion blur | 0-10 |
| Blur copies | Number | Number of samples for motion blur | 1-100 |
Motion blur enables a trailing blur effect that follows the movement direction when transformations are animated. This creates a more natural-looking movement by simulating the motion blur that occurs in real-world photography and video.
Blur spread controls the length/distance of the motion blur trails. Higher values create longer, more pronounced trails that emphasize movement direction/
Blur copies determines the number of samples used to create the motion blur. Higher values create smoother blur but require more processing power.