Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoseungme/animate-linear-gradient
Simply animate linear-gradient css background
https://github.com/hoseungme/animate-linear-gradient
animation css css-animation css-background-animations css-backgrounds css-transition linear-gradient
Last synced: 3 days ago
JSON representation
Simply animate linear-gradient css background
- Host: GitHub
- URL: https://github.com/hoseungme/animate-linear-gradient
- Owner: hoseungme
- Created: 2024-12-21T20:17:29.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-01T07:24:50.000Z (about 2 months ago)
- Last Synced: 2025-01-01T07:26:26.667Z (about 2 months ago)
- Topics: animation, css, css-animation, css-background-animations, css-backgrounds, css-transition, linear-gradient
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
animate-linear-gradient
Simply animate linear-gradient css background
## Install
```
$ npm install animate-linear-gradient
```
## Usage
### Linear Gradient
```typescript
import { LinearGradient, RGB } from "animate-linear-gradient";
const from = new LinearGradient({
angle: 270,
colorStops: [
[new RGB([0, 219, 222], 1), 0],
[new RGB([252, 0, 255], 1), 1],
],
});
// linear-gradient(270deg, rgba(0,219,222,1) 0%, rgba(252,0,255,1) 100%)
from.css();
const to = new LinearGradient({
angle: 43,
colorStops: [
[new RGB([65, 88, 208], 1), 0],
[new RGB([200, 80, 192], 1), 0.46],
[new RGB([255, 204, 112], 1), 1],
],
});
// linear-gradient(43deg, rgba(65,88,208,1) 0%, rgba(200,80,192,1) 46%, rgba(255,204,112,1) 100%)
to.css();
```
### Interpolation
```typescript
import { LinearGradient, RGB } from "animate-linear-gradient";
const from = new LinearGradient({
angle: 270,
colorStops: [
[new RGB([0, 219, 222], 1), 0],
[new RGB([252, 0, 255], 1), 1],
],
});
const to = new LinearGradient({
angle: 43,
colorStops: [
[new RGB([65, 88, 208], 1), 0],
[new RGB([200, 80, 192], 1), 0.46],
[new RGB([255, 204, 112], 1), 1],
],
});
from.interpolate(to, 0.5).css();
```
### Animate
```typescript
import { LinearGradientAnimator, LinearGradient, RGB } from "animate-linear-gradient";
const from = new LinearGradient({
angle: 270,
colorStops: [
[new RGB([0, 219, 222], 1), 0],
[new RGB([252, 0, 255], 1), 1],
],
});
const to = new LinearGradient({
angle: 43,
colorStops: [
[new RGB([65, 88, 208], 1), 0],
[new RGB([200, 80, 192], 1), 0.46],
[new RGB([255, 204, 112], 1), 1],
],
});
const animator = new LinearGradientAnimator(element, {
from,
to,
duration: 2000,
});
animator.play();
```
https://github.com/user-attachments/assets/3effec51-724a-49e6-a201-bac684a1ccae
### Animate With Easing
```typescript
import { LinearGradientAnimator, LinearGradient, RGB } from "animate-linear-gradient";
const from = new LinearGradient({
angle: 270,
colorStops: [
[new RGB([0, 219, 222], 1), 0],
[new RGB([252, 0, 255], 1), 1],
],
});
const to = new LinearGradient({
angle: 43,
colorStops: [
[new RGB([65, 88, 208], 1), 0],
[new RGB([200, 80, 192], 1), 0.46],
[new RGB([255, 204, 112], 1), 1],
],
});
function easeInOutQuart(x: number): number {
return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
}
const animator = new LinearGradientAnimator(element, {
from,
to,
duration: 2000,
easing: easeInOutQuart,
});
animator.play();
```
https://github.com/user-attachments/assets/96109141-e39c-44fa-a5bf-8c83c57ac88b
### Seek
```typescript
import { LinearGradientAnimator, LinearGradient, RGB } from "animate-linear-gradient";
const from = new LinearGradient({
angle: 270,
colorStops: [
[new RGB([0, 219, 222], 1), 0],
[new RGB([252, 0, 255], 1), 1],
],
});
const to = new LinearGradient({
angle: 43,
colorStops: [
[new RGB([65, 88, 208], 1), 0],
[new RGB([200, 80, 192], 1), 0.46],
[new RGB([255, 204, 112], 1), 1],
],
});
const animator = new LinearGradientAnimator(element, {
from,
to,
duration: 2000,
});
animator.seek(0.5);
```
https://github.com/user-attachments/assets/9e09e805-95af-4216-a380-451fc1c2bdfe