Skip to main content

Project variables

Making animations dynamic can be achieved using project variables. These could be used for light/dark themes, changing Node styling or editing text content. Project variables make use of signals - allowing variables to be updated during animations.

Adding variables via the player component can be done by passing a stringified json object to the variables attribute:


They can also be added using makeProject():

export default makeProject({
scenes: [example],
variables: {circleFill: 'red'},

Accessing the variables inside of a scene is through useScene():

const circleFill = useScene().variables.get('circleFill', 'blue');