Audience
Developers searching for a solution to manage and take care of complex CSS animations
About Choreographer-js
A simple library to take care of complicated animations. You can also add custom functions that do non-CSS animations! Install and save to your package.json, and include it in your Javascript. Brew up some instant scroll animations. Animate based on scroll location, animate based on mouse X location and create multiple animations based on mouse X location. Now you can create an instance of Choreographer, and run the animations based on whatever measurement floats your boat (ex. scroll position, mouse position, timestamp, whatever). The easiest way to understand how this all works is to check out the examples. Bugs will occur if you overlap animation ranges that affect the same style properties! There are two built-in animation functions available, called 'scale' and 'change'. Progress is what allows for progressive scaling of values (ex. smooth fading of opacity, 2d translation, etc.) If the value is between 0 and 1, that means you are within a range.
Other Popular Alternatives & Related Software
SVGator
SVGator is an online animation software that lets users create animations without any coding skills. Besides the SVG vector format, there are many other export formats available: Lottie JSON, GIF, .JS, .DART, multiple raster image formats and video formats, etc.
SVGator also supports custom easing functions, snapping, and interactivity, so the animation can be set to start on mouse-over, on scroll into view, or on click. The keyframe-based, friendly interface includes advanced animators like Morph, Filter, Color, Translate, Stroke, and many more.
SVGator enables users to automate custom workflows and create stunning animated icons, logos, illustrations, and other graphic arts in the fastest way possible.
Other benefits include the constantly growing assets library, player API and videos up to 4k resolution at 60 fps, with transparency support, rendered in the cloud. The exported SVG is ready to implement and looks the same as in preview mode.
Learn more
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.
Learn more
Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects. Follow through animations made easy. Anime's built-in staggering system makes complex follow-through and overlapping animations simple. It can be used on both timings and properties. Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element. Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions. Anime.js works with anything web. CSS, SVG, DOM attributes and JavaScript Objects, animate everything with a single unified API. Staggering allows you to animate multiple elements with follow-through and overlapping action. Animation keyframes are defined using an Array, within the keyframes property. Each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
Learn more
Velocity.js
Velocity is an animation engine with the same API as jQuery's animate. It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Velocity, include it on your page and replace all instances of jQuery's animate with velocity. You will immediately see a performance boost across all browsers and devices, especially on mobile. Velocity works everywhere, back to IE8 and Android 2.3. Under the hood, it mimics jQuery's queue, and thus interoperates seamlessly with jQuery's animate, fade, and delay. Since Velocity's syntax is identical to animate, your code doesn't need to change. JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it's jQuery that's slow. Although Velocity works alongside jQuery, it uses its own animation stack that delivers its performance.
Learn more
Pricing
Starting Price:
Free
Free Version:
Free Version available.
Integrations
API:
Yes, Choreographer-js offers API access
No integrations listed.
Company Information
Choreographer-js
christinecha.github.io/choreographer-js/
Videos and Screen Captures
Other Useful Business Software
Catch Bugs Before Your Customers Do
Move from alert to fix before users notice. AppSignal monitors errors, performance bottlenecks, host health, and uptime—all from one dashboard. Instant notifications on deployments, anomaly triggers for memory spikes or error surges, and seamless log management. Works out of the box with Rails, Django, Express, Phoenix, Next.js, and dozens more. Starts at $23/month with no hidden fees.
Product Details
Platforms Supported
Cloud
Windows
Mac
Linux
iPhone
iPad
Android
Chromebook
Training
Documentation
Support
Online
