Skip to content

Commit

Permalink
📝 Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
lnardon committed Nov 9, 2023
1 parent 958d5eb commit 532e98a
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 8 deletions.
3 changes: 2 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/test/*
.git/*
node_modules/*
/node_modules/*
demo.gif
/docs/*
40 changes: 33 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.

<img src="./docs/demo.gif" />

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
<div class="container">
<div id="animated-text"></div>
</div>
```

Typescript / Javascript

```javascript
animateText("Hello World", "animated-text", 50);
animateText("Hello World", "animated-text", 50, slideDown);
```

React: (soon...)
React: (coming soon...)

0 comments on commit 532e98a

Please sign in to comment.