gradient-transition

A JavaScript library to smoothly animate background-image gradients.

Table of Contents

• Installation
• Quick Start
• Supported Features and Limitations
• Performance Considerations

Installation

Install via npm or yarn:

npm install gradient-transition --save
# or
yarn add gradient-transition

CDN:

<script src="https://unpkg.com/[email protected]/dist/gradient-transition.umd.cjs"></script>

Note: This will expose the library globally as GradientTransition.

Quick Start

1. Add the markup:

   <div class="gt-wrap my-wrapper" style="height: 200px; width: 200px;">
     <span class="gt-render my-gradient"></span>
     SOME CONTENT
   </div>

   • .gt-wrap and .gt-render are reserved classes required by the library.

2. Define your CSS gradient transition on the .my-gradient element:

   .my-wrapper .my-gradient {
     background-image: linear-gradient(90deg, #006d77, #83c5be, #edf6f9);
     transition: background-image 0.5s ease-in-out;
   }
   .my-wrapper:hover .my-gradient {
     background-image: linear-gradient(to bottom, #a31621, #bfdbf7, #053c5e);
   }

3. Initialize with JavaScript:

   import { attach, detach, reset } from "gradient-transition";
      
   attach(".gt-wrap.my-wrapper"); // Attach to all matching wrappers
   detach(".gt-wrap.my-wrapper"); // To detach
   reset(); // To reset all

👉 Live Demo on CodePen

Supported Features and Limitations

• Gradient types: linear-gradient, radial-gradient.
• Angle units: deg, rad.
• Color stop units: px, %, em.

Performance Considerations

Animating gradients in real time is computationally intensive. Use with caution in production, especially on devices with limited CPU/GPU resources. Thoroughly test performance in your target environments.

Issues, suggestions, and pull requests are welcome!
Feel free to check out the GitHub.