WIP: Animated Banner

Animated Banner is a web component that animates given text using CanvasAPI. Made with Stencil.

Notice: This project is not production ready yet.

Getting Started

To start working on animated-banner, clone this repo to a new directory:

git clone https://github.com/dominiknowicki/animated-banner.git
cd animated-banner
git remote rm origin

and run:

npm install
npm run start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out Stencil docs here.

Using this component

There are three strategies recommended for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Make sure to build for a production (without --dev flag) before publishing! Using dev build will not generate the loader and you will end up with missing defineCustomElements problem ;)

Script tag

• Import animated-banner webcomponent -put <script type='module'>import { defineCustomElements } from 'https://unpkg.com/animated-banner/loader/index.es2017.js'; defineCustomElements();</script> in the head of your index.html
• Import animations -put <script type='module' src='https://unpkg.com/animated-banner/animations/slide-text.js'></script>, where slide-text.js is the basic animation, in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install animated-banner --save
• Put a script tag similar to this <script type='module' src='node_modules/animated-banner-component/dist/animated-banner-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc