https://github.com/hoseungme/linear-gradient-element
Set linear-gradient CSS background of your element, with transition animation, interpolation
https://github.com/hoseungme/linear-gradient-element
animation color css css-animations css-transitions linear-gradient transition
Last synced: 2 months ago
JSON representation
Set linear-gradient CSS background of your element, with transition animation, interpolation
- Host: GitHub
- URL: https://github.com/hoseungme/linear-gradient-element
- Owner: hoseungme
- Created: 2025-01-11T07:50:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-20T13:25:26.000Z (over 1 year ago)
- Last Synced: 2025-10-24T14:58:56.047Z (6 months ago)
- Topics: animation, color, css, css-animations, css-transitions, linear-gradient, transition
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
linear-gradient-element
Set linear-gradient CSS background of your element, with transition animation, interpolation
## Install
```
$ npm install linear-gradient-element
```
## Usage
Simple usage in React:
```tsx
import { LinearGradientElement, LinearGradient, RGB } from "linear-gradient-element";
```
```tsx
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],
],
});
```
### Transition
```tsx
function Transition() {
const ref = useRef(null);
useEffect(() => {
const target = ref.current;
if (!target) {
return;
}
const element = new LinearGradientElement(target, from);
element.transition(to, { duration: 2000 });
}, []);
return
;
}
```
https://github.com/user-attachments/assets/d4321306-2601-429a-9986-f9ba5664aa2f
### Transition With Easing
```tsx
function easeInOutQuart(x: number): number {
return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
}
function TransitionWithEasing() {
const ref = useRef(null);
useEffect(() => {
const target = ref.current;
if (!target) {
return;
}
const element = new LinearGradientElement(target, from);
element.transition(to, { duration: 2000, easing: easeInOutQuart });
}, []);
return
;
}
```
https://github.com/user-attachments/assets/46afb840-6abc-4efc-858f-c6845973db18
### Interpolation
```tsx
function Interpolation() {
const ref = useRef(null);
const [element, setElement] = useState(null);
useEffect(() => {
const target = ref.current;
if (!target) {
return;
}
setElement(new LinearGradientElement(target, from));
}, []);
return (
element?.interpolation(from, to, 0)}>0%
element?.interpolation(from, to, 0.25)}>25%
element?.interpolation(from, to, 0.5)}>50%
element?.interpolation(from, to, 0.75)}>75%
element?.interpolation(from, to, 1)}>100%
);
}
```
https://github.com/user-attachments/assets/0862f614-d72f-4cff-9fef-6db108d686cf