Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-connection-beam
A simple component library to connect elements with an animated beam.
https://github.com/omnedia/ngx-connection-beam
Last synced: about 1 month ago
JSON representation
A simple component library to connect elements with an animated beam.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-connection-beam
- Owner: omnedia
- License: mit
- Created: 2024-08-27T09:50:47.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-26T14:16:29.000Z (4 months ago)
- Last Synced: 2024-10-03T08:05:51.138Z (3 months ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-connection-beam (⭐3) - An Angular component that dynamically renders animated connection lines between two elements. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-connection-beam - An Angular component that dynamically renders animated connection lines between two elements. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-connection-beam - An Angular component that dynamically renders animated connection lines between two elements. (Table of contents / Third Party Components)
README
# ngx-connection-beam
`@omnedia/ngx-connection-beam` is an Angular component that dynamically renders animated connection lines between two elements. With customizable curvature, colors, and animation settings, it creates visually striking connection beams between any two elements in your Angular application.
## Features
- Dynamic Paths: Automatically calculates and draws a smooth path between two HTML elements, with customizable curvature.
- Customizable Appearance: Control the beam’s color, width, opacity, and gradient, allowing for a wide range of visual effects.
- Smooth Animations: Animate the connection beams with customizable duration and delay, making them perfect for drawing attention to interactions or flows.
- Viewport-Aware: The component updates its dimensions and position in response to window resizing to maintain accuracy.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-connection-beam
```
## Usage
Import the `NgxConnectionBeamComponent` in your Angular module or component:
```typescript
import { NgxConnectionBeamComponent } from '@omnedia/ngx-connection-beam';
@Component({
...
imports: [
...
NgxConnectionBeamComponent,
],
...
})
```
Use the component in your template:
```html
```
## How It Works
- Connection Line Between Elements: NgxConnectionBeamComponent connects two specified elements using an SVG path. This path is dynamically calculated based on the relative positions of the two elements, ensuring that the connection remains intact even if the window is resized.
- Smooth Animations: The connection beam can be animated using cubic easing, making the appearance of the connection more fluid and engaging.
- Customizable Gradient: With support for linear gradients, the connection beam can transition between colors for a dynamic, visually engaging effect.
## API
```html
```
- `fromRef` (required): A reference to the HTML element where the connection starts.
- `toRef` (required): A reference to the HTML element where the connection ends.
- `curvature` (optional): Curvature of the beam, defining how much the path curves between the two points. Defaults to 0.
- `pathColor` (optional): The color of the connection path. Defaults to 'gray'.
- `pathWidth` (optional): The width of the connection path. Defaults to 2px.
- `pathOpacity` (optional): The opacity of the connection path. Defaults to 0.2.
- `gradientStartColor` (optional): The color at the start of the gradient. Defaults to '#ffaa40'.
- `gradientStopColor` (optional): The color at the end of the gradient. Defaults to '#9c40ff'.
- `duration` (optional): Duration of the animation in seconds. Defaults to a random value between 4 and 7.
- `delay` (optional): Delay before the animation starts, in seconds. Defaults to 0.
- `reverse` (optional): Reverses the direction of the gradient animation. Defaults to false.
- `startXOffset`, `startYOffset`, `endXOffset`, `endYOffset` (optional): Offsets to fine-tune the start and end positions of the beam relative to the elements.
## Example
```html
```
This example draws a curved connection beam between two elements with a red-to-purple gradient that animates over 5 seconds.
## 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.