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

Online Playground

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

JavaScript imports usage

Check the demonstration.

You can use npm or yarn.

Setup:

yarn add nanno \
         pixi.js pixi.js-legacy \
         gsap fontfaceobserver

HTML:

<div id="animation-container"></div>
<script src="/your-bundle.js"></script>

JavaScript:

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'),
);

JavaScript standalone usage

Check the demonstration.

HTML:

<div id="animation-container"></div>

<script src="pixi.js/5.1.3/pixi.min.js"></script>

<script src="gsap/3.6.0/gsap.min.js"></script>
<script src="gsap/3.6.0/PixiPlugin.min.js"></script>
<script src="fontfaceobserver.standalone.js"></script>

<script src="nanno-standalone.js"></script>

JavaScript

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

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

Development

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