nanno-js

A JavaScript implementation of the nanno language.

It provides a compiler for the source code and a player that runs on canvas and WebGL 2.

Powered by PixiJS, GSAP and Font Face Observer.

> _Warning: The nanno language is in the early stages. You should expect some breaking-changes in the language specification during this period._

- Getting Started
- Online Playground
- JavaScript imports usage
- JavaScript standalone usage
- Development

Getting Started

$3

Try the Online Playground: You can check out several examples and render your source code right away.

!nanno Language Playground

$3

Check the demonstration.

You can use npm or yarn.

_Setup:_
``bash
yarn add nanno \
pixi.js pixi.js-legacy \
gsap fontfaceobserver
`

_HTML:_
`html




`

_JavaScript:_
`js
import * as PIXI from 'pixi.js';
import * as PIXILegacy from 'pixi.js-legacy';
import gsap from 'gsap';
import PixiPlugin from 'gsap/PixiPlugin';
import FontFaceObserver from 'fontfaceobserver';

import Nanno from 'nanno';

const nanno = new Nanno({
pixi: PIXI, pixiLegacy: PIXILegacy,
gsap, gsapPixiPlugin: PixiPlugin,
font: FontFaceObserver,
});

nanno.renderFile(
'animation-source.nn',
document.getElementById('animation-container'),
);
`

$3

Check the demonstration.

_HTML:_
`html







`

_JavaScript_
`js
const nanno = new Nanno({
pixi: PIXI,
gsap, gsapPixiPlugin: PixiPlugin,
font: FontFaceObserver,
});

nanno.renderFile(
'animation-source.nn',
document.getElementById('animation-container'),
);
`

Development

`bash
bundle exec guard

yarn run webpack --env NODE_ENV=development
yarn run webpack --env NODE_ENV=production

python -m http.server 8000 --directory docs

yarn test
yarn lint

npm pack
npm install --local nanno-0.0.1.tgz
``