Skip to main content

CSS Layer

As already mentioned MotorCortex exposes the CSSEffect Incident for animating HTML elements' css attributes.

The fully modular and plugin-oriented nature of MotorCortex gives the ability to any CSS animations library to implement their own version of the CSSEffect Incident and provide it to the MotorCortex users. By doing so MotorCortex users will keep on using the library they know and love.

The CSSEffect specifically is the internal implementation of CSS properties tweening. It implements the CSS Layer of MotorCortex by Web Animations API.

If a user wants to use a different CSS Layer library that implements the CSSEffect they can just do the following:

import { setCSSCore } from "@donkeyclip/motorcortex";
import { CSSEffect } from "css-layer-plugin";
setCSSCore(CSSEffect);

/*
from that point and on CSSEffect class will refer to the loaded CSS core. Keep in mind that
even if multiple core changes occur on the same clip, MotorCortex maintains just one conflicts
prevention system for the CSS properties of the elements. That means that even if you change
CSS core in your code, you'll never be able to animate the same CSS property of any element
from two different Incidents at the same time. Never.
*/

All CSSEffects provided by various CSS Layer plugins have the exact same syntax as they support the exact same attributes and properties sets.