https://github.com/omnedia/ngx-word-morph

A simple component library to animate text.
https://github.com/omnedia/ngx-word-morph

Last synced: about 2 months ago
JSON representation

A simple component library to animate text.

• Host: GitHub
• URL: https://github.com/omnedia/ngx-word-morph
• Owner: omnedia
• License: mit
• Created: 2024-07-16T07:20:58.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-08-24T13:55:40.000Z (5 months ago)
• Last Synced: 2024-10-31T13:09:22.043Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 7.81 KB
• Stars: 4
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• trackawesomelist - ngx-word-morph (⭐4) - An Angular library designed to facilitate word morphing animations within Angular applications. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
• awesome-angular - ngx-word-morph - An Angular library designed to facilitate word morphing animations within Angular applications. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-word-morph - An Angular library designed to facilitate word morphing animations within Angular applications. (Table of contents / Third Party Components)

README

        
# Ngx Word-Morph Component

`@omnedia/ngx-word-morph` is an Angular library designed to facilitate word morphing animations within Angular applications.

## Features

- Morph words within your Angular application.

- Easily customizable.

## Installation

Install the library using npm:

```bash

npm install @omnedia/ngx-word-morph

```

## Usage

Import the `NgxWordMorphComponent` in your Angular module:

```typescript

import { NgxWordMorphComponent } from '@omnedia/ngx-word-morph';

@Component({

  ...

  imports: [

    ...

    NgxWordMorphComponent,

  ],

  ...

})

```

Use the component in your template:

```html

```

## API

```html

```

Starts the word morphing effect.

- `words`: An array of strings to be animated.

- `morphDuration`: (optional): The duration of the morphing animation in milliseconds. Default is 1000.

- `morphDelay`: (optional): The delay between morphing one word to the next in milliseconds. Default is 5000.

- `styleClass`: (optional): Add a class to the `
` wrapper tag.


## Styling

If you want to style the text, do it globally via the `styleClass`. 


To change the font size make sure to change the `--om-word-morph-font-size` variable instead of directly changing the size.

## Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

## License

This project is licensed under the MIT License.