# devikex/js-animationcontroller architecture

> Architecture diagram of the GitHub repository devikex/js-animationcontroller, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/devikex/js-animationcontroller
- Repository: https://github.com/devikex/js-animationcontroller

## Overview

JS-AnimationController runs user-defined JSON animation trees against selected page elements, supporting legacy and newer formats, chained animation steps, CSS animation classes, delays, fades, scrolling, and dynamic values. The sampled source confirms the controller’s entry points, type dispatch, animation helpers, and value parsing; traversal and selector-resolution internals are not shown, so their detailed wiring is omitted.

Main entry points: [`animationController.js`](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js) (Effect handlers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Animation runtime"]
  node_controller["Controller entry points"]
  node_traversal["Format traversal"]
  node_dispatch["Type dispatch"]
  node_handlers["Effect handlers"]
end

subgraph group_definitions["Animation definitions"]
  node_tree["JSON animation tree"]
  node_classdefs["Animation classes"]
  node_values["Dynamic values"]
end

subgraph group_browser["Browser effects"]
  node_page["Selected elements"]
  node_jquery["jQuery effects"]
end

node_author(("Animation author"))

node_author -->|"defines"| node_tree
node_tree -->|"configures"| node_controller
node_controller -->|"starts"| node_traversal
node_traversal -->|"processes steps"| node_dispatch
node_dispatch -->|"dispatches types"| node_handlers
node_handlers -->|"resolves styles"| node_classdefs
node_handlers -->|"parses parameters"| node_values
node_handlers -->|"runs effects"| node_jquery
node_jquery -->|"animates"| node_page
node_handlers -->|"continues steps"| node_traversal

click node_controller "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"
click node_traversal "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"
click node_dispatch "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"
click node_classdefs "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"
click node_values "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"
click node_handlers "https://github.com/devikex/js-animationcontroller/blob/master/animationController.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_controller,node_traversal,node_dispatch,node_handlers toneBlue
class node_tree,node_classdefs,node_values toneAmber
class node_page,node_jquery toneMint
class node_author toneIndigo
```

## Components

### Animation runtime

- [Controller entry points](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`
- [Format traversal](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`
- [Type dispatch](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`
- [Effect handlers](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`

### Animation definitions

- **JSON animation tree**
- [Animation classes](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`
- [Dynamic values](https://github.com/devikex/js-animationcontroller/blob/master/animationController.js): `animationController.js`

### Browser effects

- **Selected elements**
- **jQuery effects**

### Other components

- **Animation author**

## Connections

- Animation author → JSON animation tree: defines
- JSON animation tree → Controller entry points: configures
- Controller entry points → Format traversal: starts
- Format traversal → Type dispatch: processes steps
- Type dispatch → Effect handlers: dispatches types
- Effect handlers → Animation classes: resolves styles
- Effect handlers → Dynamic values: parses parameters
- Effect handlers → jQuery effects: runs effects
- jQuery effects → Selected elements: animates
- Effect handlers → Format traversal: continues steps