diff --git a/.npmignore b/.npmignore index 77e4496..91e1025 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,5 @@ /test/* .git/* -node_modules/* +/node_modules/* demo.gif +/docs/* diff --git a/README.md b/README.md index d8ff2b3..3a36063 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,49 @@ # Animated Text Letters -An npm package to add animation to your text letters. +0 dependencies npm package to add animation to your text letters. -Access the demo here https://lnardon.github.io/AnimatedText +Access the live demo here https://lnardon.github.io/AnimatedText -### Install +## **Install** ```bash npm install animated-text-letters ``` -#### Usage +The package also comes with 5 animations, just import the one you'd like and pass it as the 4th argument to the function. \ +They are: -Vanilla JS: +- appear +- slideUp +- slideDown +- slideLeft +- slideRight + +## **Usage** + +```typescript +// text : Text to be animated +// targetId : Id of the html element where the text will be animated and appended to. (element.append()) +// delay : Amount of animation delay between letters in ms. (Optional)[Default: 0] +// animationKeyframes : @keyframes animation to be applied to the letters. (Optional)[Default: slideDown] + +animateText(text:string, targetId:string, delay?:number = 0, animationKeyframes?:string); +``` + +HTML + +```html +
+
+
+``` + +Typescript / Javascript ```javascript -animateText("Hello World", "animated-text", 50); +animateText("Hello World", "animated-text", 50, slideDown); ``` -React: (soon...) +React: (coming soon...)