# CSSY engine

## What it is
An animation engine that lets you write you animation in sheets instead
of polluting your code.

## Based on CSS
A `cssy` file is an a animation sheet that describe how to animate the HTML elements or the components of a web page.
Basic idea of the syntax:
```css
myElement {
	animationName {
		a_command: some_args;
		another_command: arg1, arg2;
		[
			command1: arg1;
			command2: arg2;
		]
		complex_command: (
			arg1: value;
			arg2: value;
		);
		call: versatilAnimation, 5, 2;
	}

	versatilAnimation {
		~argument: $a, 0;
		~argument: $b, 0;
		~another_option: arg;
		command: arg1, $a;
		command2: arg1, $b - $a;
	}

	@eventName {
	}

	@eventName .child_selector {
	}
}
```

## Animation Options
### Overriding options when calling an animation
```css
myElement {
	@loaded {
		call: animation_name (
			~option: override_value;
		);
	}
}
```
### Options list
* `argument: label, defaultValue`
Declare that this animation can accept an argument.

## Events
### Targeting children
It's possible to target children within the current element with events
```css
myElement {
	@loaded .child_class {
	}
	@loaded div {
	}
}
```
### List
* `loaded`
Called when the selected element is loaded on the page.
* `onViewport(target)`
Called when the selected element is visible on the specified viewport (e.g screen).
* `enteringViewport(target)`
Called while the selected element is entering on the specified viewport. This events contains some built-in arguments to specify how much the element is close to the viewport.
* `leavingViewport(target)`
* All supported HTML events, such as `mouseenter`, `click`.

## Commands
### List
* `spawn`
Inject an HTML element relative to the current element. Ex: make animations like http://freebbble.com/2018/11/20/page-indicator-exploration/.