Move

What you’ll learn#

• Move video programmatically using Swift
• Use the IMG.LY UI to drag images
• Adjust video position on the canvas
• Move multiple blocks together
• Constrain video movement in templates

When to use#

Use movement to:

• Position content precisely in designs
• Align video with text, backgrounds, or grid layouts
• Enable drag-and-drop or animated movement workflows

Move videos with the UI#

Users can drag and drop elements directly in the editor canvas.

Move a video block programmatically#

Video block position is controlled using the position/x and position/y properties. They can either use absolute or percentage (relative) values. In addition to setting the properties, there are helper functions.

try engine.block.setFloat(videoBlock, property: "position/x", value: 150)
try engine.block.setFloat(videoBlock, property: "position/y", value: 100)

or

try engine.block.setPositionX(videoBlock, value: 150)
try engine.block.setPositionY(videoBlock, value: 150)

This moves the video to coordinates (150, 100) on the canvas. The origin point (0, 0) is at the top-left.

try engine.block.setPositionXMode(videoBlock, mode: .percent)
try engine.block.setPositionYMode(videoBlock, mode: .percent)
try engine.block.setPositionX(videoBlock, value: 0.5)
try engine.block.setPositionY(videoBlock, value: 0.5)

This moves the video to the center of the canvas, regardless of the dimensions of the canvas. As with setting position, you can update or check the mode using position/x/mode and position/y/mode properties.

let xPosition = try engine.block.getPositionX(videoBlock)
let yPosition = try engine.block.getPositionY(videoBlock)

Move multiple elements together#

Group elements before moving to keep them aligned:

let groupId = try engine.block.group([videoBlockId, textBlockId])
try engine.block.setPositionX(groupId, value: 200)

This moves the entire group to 200 from the left edge.

Move relative to current position#

To nudge a video instead of setting an absolute position:

let xPosition = try engine.block.getPositionX(videoBlock)
try engine.block.setPositionX(videoBlock, value: xPosition + 20)

This moves the video 20 points to the right.

Lock movement (optional)#

When building templates, you might want to lock movement to protect the layout:

try engine.block.setScopeEnabled(videoBlock, key: "layer/move", enabled: false)

You can also disable all transformations for a block by locking, this is regardless of working with a template.

try engine.block.setTransformLocked(videoBlock, locked: true)

Troubleshooting#