animate-linear-gradient

Simply animate linear-gradient css background

Install

$ npm install animate-linear-gradient

Usage

Linear Gradient

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

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

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();

Screen.Recording.2024-12-22.at.4.58.49.PM.mov

Animate With Easing

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();

Screen.Recording.2024-12-22.at.4.59.42.PM.mov

Seek

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);

Screen.Recording.2024-12-22.at.4.51.47.PM.mov