Features regarding the project

Multiple / simultaneous instances

You can add multiple projects on the same web page which will run simultaneously. You can even add the same project multiple times.

There is no limit of the number of projects, but you should keep in mind the performance aspect of it.


Wait for complete loading

A project is only displayed once all the assets are fully loaded. This ensures that your website will never display half of the project and make it look weird.

Nothing will be displayed until the project is ready.


Placeholder option

You can set another project to be displayed until your main project is fully loaded. This is mainly a performance feature, but you can get creative with it.


Mobile Substitute option

Mobile devices usually have lower output power, so a complex project that runs well on desktop might look horrible on mobile. 

It is recommended that you set a simpler project to be used for the mobile devices instead of your main one. It can be as simple as a static image.


Enabled / Disabled option

Sometimes you want to directly hide some projects from your website. That's what this feature is about.



Features regarding the layer

Display order

You can decide the exact order of your layers inside a project.


Unlimited number

There is no limitation of how many layers a project can have.


Individual asset

Each layer can hold its own asset, being it image or video, or any size.


Unique properties

Some of layer's properties are considered unique between different timelines, which means they maintain the exact value.

This feature can allow you to create interesting interactions and effects.


Parent-depended properties

Some of layer's properties are applied according to another layer (or the viewport, by default). 

This feature can help you create connections between layers that result in interesting effects.


Property: visibility

A layer can be displayed or not. Invisible layers are useful when used with parent-depended properties to create interesting effects.


Property: parent layer

A layer can use the viewport or another layer for its parent-depended properties.


Property: pivot

The asset can be displayed with different alignment to its layer.


Property: alignment

A layer can have different alignment to its parent.


Property: position

A layer can have a custom position.


Property: rotation

A layer can have a custom rotation.


Property: scale

A layer can have its asset of different size than the original.


Property: flip x/y

A layer can have its asset horizontally or vertically flipped.


Property: opacity

A layer can have different opacity / transparency.


Timeline and key-frame system

The properties of layers follow a key-frame-based system, similar to the ones from video editing or sprite animations.


Multiple simultaneous timelines

The properties of a layer are calculated based on multiple timelines, given their own input.

This allows you to create projects that react differently based on what the user is doing (or what kind of input it is used).


Timeline's priority

The order in which multiple timelines are applied for a specific layer property is given by the general priority of timelines.

You can choose custom priorities based on your project's needs.


Timeline: scroll

You can create animations based on scroll input.


Timeline: mouse x/y

You can create animations based on horizontal or vertical mouse / touch input.


Activated / Deactivated key-frame

You can choose when to apply a property value based on different timelines by activating or deactivating the key-frames on that timelines.



Features regarding the viewport

Display virtualization

You can create your project based on a custom resolution (a virtual one) and then let Layer Magic resize it based on your website.

We call the virtual display a "viewport".


Property: size

A viewport can have custom size representing the drawing area.


Property: display as background / content

You can choose to use your project as background in your website, or as content.


Property: n-th html container

Since the project will be displayed on a website (built as HTML), you may need to specify in which container you want to place the canvas.


Property: alignment as background

If you decide to use your project as a background, you can align it to its container.


Property: alignment as content

If you decide to use your project as a content, you can align it to other content elements.


Property: scale as background

If you decide to use your project as a background, you can resize it based on its container.


Property: scale as content

If you decide to use your project as a content, you can resize it based on its container.


Property: css z-index

If you decide to use your project as a background, you can specify custom CSS z-index value, to ensure that it blends well into your website.


Property: hide / show overflow

If you decide to use your project as a background, you can choose to limit or not according to its container's size.


Property: scroll event type

You can choose to if your project will receive scroll input only while the mouse is inside or not.


Property: scroll timeline mapping

You can choose the correlation between the website scroll and your scroll timeline.


Property: scroll loop

You can choose whether the scroll timeline will reset once it reaches its limits.


Property: wheel / touch speed

You can choose the amount of scroll you mouse wheel / touch generates.


Property: mouse event type

You can choose to if your project will receive mouse / touch input only while the mouse is inside or not.


Property: mouse middle point

You can choose the point that is considered the (0, 0) value of your mouse timeline.


Property: mouse middle to edge

You can choose the correlation between the mouse middle point and the edges of the screen.