StencilJS and general concepts - momentumfx/poc GitHub Wiki

Since MomentumFX (Mfx) is aimed to be framework agnostic, we wanted to create an unbiased framework - Stencil is the combination between React (with tsx notation) and Angular (with typescript Decorators).

Mfx should be a plug & play solution and should be easily attached to any existing website in any Framework and even vanilla JS/HTML

Concepts

Player

A player is eventually an animation capturer, for every type of animation we can create a player that holds the animation’s properties such as - duration, type, from - to values etc. The player gets registered automatically to the first Timeline available in the DOM and will only be played when the Timeline will decide to fire.

Timeline

The timeline is a player aggregator, registers all the players beneath it. You can look at the timeline as a complex choreographed animation and since we treat it as a complete animation it will also produce a Player and will register itself to the parent Timeline, This approach will allow us to break down complex animations to bits of encapsulated shareable animations.

Decorators

@Timeline()

@Timeline({
 name: 'myTimeline'
})
export class MyTimeline implements TimelineHandler {}

The Timeline decorator will register the class to momentumfx registry by its name. @Timeline properties and TimelineHandler implementation TBD.

Components

The mfx-timeline custom element is the entry point of mfx, it will automatically try to find a parent timeline and will register itself to it. Besides maintaining the hierarchy of timelines mfx-timeline will get a class handler by the handler property

@Prop() handler: string; 

Once we get a handler name we will convert it to the class instance from the mfx registry.

The timeline will querySelect for every @animation until it reaches a dead end or an other mfx-timeline and will create a Player with the specified attributes.

@animation (TBD)

Ideally should be a “directive” or a custom-attribute but since it’s not supported yet we will use query selection to find and process it. An attribute that can be used on any element in order to tell mfx which Player to produce (api tbd). The api will include the type of the animation (style, class, etc..), duration and optional additional properties.