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: html <script src="https://unpkg.com/gradient-transition@0.0.1/dist/gradient-transition.umd.cjs"></script>

Quick Start

1. Add the markup:

   <div class="gt-wrap my-wrapper">
     <span class="gt-render my-gradient"></span>
   </div>

   • .gt-wrap and .gt-render are reserved classes required by the library.
   • .my-gradient and .my-wrapper are your custom classes for gradients styling.

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

   /* Initial gradient */
   .my-gradient {
     background-image: linear-gradient(90deg, green, white, red);
     /* Optional: customize transition properties */
     transition: background-image 1s ease-in-out;
   }
   /* On hover, triggers a smooth transition */
   .my-gradient:hover {
     background-image: linear-gradient(black, red, yellow);
   }

3. Initialize with JavaScript:

   import CSSRulesMatcher from 'css-rules-matcher';
   // Attach gradient transition to all matching wrappers
   GradientTransition.attach('.gt-wrap.my-wrapper');
   // To detach
   GradientTransition.detach('.gt-wrap.my-wrapper');
   // To reset all transitions
   GradientTransition.reset();

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.