Audience
Individuals in search of a solution to create fluid and interactive gradient animations
About Granim.js
Create fluid and interactive gradient animations with this small javascript library. Basic gradients animation with 3 gradients in queue composed of 2 colors. Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors. Gradient animation with an image and blending mode. Gradient animation with 2 colors, a background image, and a blending mode set. More parameters for options are available on the API page. Gradient animation with an image mask to create a gradient animation under a shape. Create a gradient animation that responds to events. Click on the different states in the gradient animation to see the gradients change. Customize the direction of the gradient with pixels or percentage values. The animation always pauses when changing the tab. Manage and change the duration of the animations. All the options are available to customize the states and the different gradients.
Other Popular Alternatives & Related Software
Riveo
Riveo by Forge and Form is a video and FX composer for iPhone and iPad that combines professional-grade tools with intuitive controls to let creators build highly polished visuals directly on mobile. It offers fluid simulations, responsive motion effects, layered custom filters, and “Future Text” with bevels, gradients, realistic shadows, and reflections. Transitions are reinvented beyond simple cross-fades, and a suite of pro tools enables remapping time, color tweaking, and detailed keyframe animation with both slider simplicity and advanced control. Features include AI-generated subtitles and masking, text animations, 4K output, 60fps support, filters, stickers, voice recording, GIF creation, precomposing, RGB curves, built-in music, custom shapes, stock footage, AI images, mesh gradients, and speed editing, all previewable via camera integration. Templates and AI enhancements streamline creation while maintaining flexibility for bespoke design.
Learn more
Banner Design Studio
Banner Design Studio helps you create absolutely stunning animated or static flash and GIF banners with just a few clicks of the mouse, requiring no graphic expertise whatsoever. Choose from hundreds of professionally designed banners of different industry categories and industry-standard sizes. Set your background either as animated or static, choose from 400+ backgrounds or add solid color or a gradient or add your own image. Also, import animation in the background in SWF format. Add unlimited text fields; import system fonts, apply the curved effect to text with arc text, access font character map, use transition effects, hyperlink text, and more, all in seconds. Add custom images, change their positions, adjust their brightness and contrast, flip, rotate and even add a hyperlinkg. Use the built-in dynamic shape generator to create different shapes or access symbols from a library of 4000 symbols. Easily change their properties and apply different effects.
Learn more
Synfig Studio
Synfig Studio is a free and open-source 2D animation software, designed as a powerful industrial-strength solution for creating film-quality animation using a vector and bitmap artwork. It eliminates the need to create frame-by-frame animation, allowing you to produce 2D animation of a higher quality with fewer people and resources. Transform any vector shape into another! Synfig gives you powerful tools for full control of your vector artwork. Just set the key positions and the intermediate frames will be calculated automatically. Synfig provides more than 50 layers to create illustrations and animations of any complexity. Choose from several types of layers: geometry, gradients, filters, distortions, transformations, fractals and others. The full-featured bone system allows you to create cutout animations using bitmap images or control your vector artwork.
Learn more
Multiple.js
An experiment in sharing background across multiple elements using CSS. If you want to accomplish a "background sharing across multiple elements" effect in HTML/CSS without any coordinates processing by JavaScript, Multiple.js is the answer. Note that icons and text at lighter layers have gradient-color from darker layers, creating the illusion of an underlying violet layer. In addition to that, layers pass the background image (girl) with equal transparency so that layers can not be superimposed on each other. All these things can be implemented in CSS. Add a gap between elements to make sure that the background remains in the same position. Toggle background image/gradient to get idea how it looks. Miss random layers to make sure that elements are independent. Expands background to viewport's size and displays in every element appropriate chunk, exactly what is needed! Background can be successfully expanded to full viewport size.
Learn more
Pricing
Starting Price:
Free
Free Version:
Free Version available.
Integrations
API:
Yes, Granim.js offers API access
No integrations listed.
Company Information
Granim.js
United States
sarcadass.github.io/granim.js/
Videos and Screen Captures
Other Useful Business Software
Gemini 3 and 200+ AI Models on One Platform
Build generative AI apps with Vertex AI Studio. Switch between models without switching platforms.
Product Details
Platforms Supported
Cloud
Windows
Mac
Linux
iPhone
iPad
Android
Chromebook
Training
Documentation
Support
Online
