Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

crossani

Package Overview
Dependencies
0
Maintainers
2
Versions
4
Issues
File Explorer

Advanced tools

crossani

A silky smooth declarative animation library for the web.

    1.1.1latest

Version published
Maintainers
2
Yearly downloads
258

Weekly downloads

Readme

Source

CrossAni

A silky smooth declarative animations lib for the web.

Why CrossAni?

Browser-Native Performance

A traditional animation library works by updating a property of an element repeatedly with JavaScript.

This is required for things like SVG elements, and is also much much easier for more complex animations such as springs.

However: this can have massive performance repurcussions.

CrossAni uses CSS transitions to fix this problem, using the browser's built in animating tools.

CrossAni effectively guarantees 60fps animations every time, or whatever refresh rate you run at.

The main other way to achieve this is the Web Animations API (WAAPI).

Size Matters

We live in an era of shaving milliseconds off load times, and a good chunk of this is JS bundle size.

CrossAni is TINY. As I write this it's 2.5KB raw or 1.12KB gzipped. This is much smaller than the major animation libraries available (see comparisons further down).

How does it behave?

Each element has an independent queue of pending animations.

When you run an animation it will be queued to run, or if the element is stationary, will animate immediately.

The queue will automatically run one-after-the-other until all animations are complete.

Any animations with cutOff: true set will interrupt the current animation, cause all animations on the queue to finish instantly (we don't even transition them, just apply their changes!), and then run itself as usual from the final styles applied by all preceeding animations.

CrossAni will only replace styles specified at each state. If you do not want a state to allow leaving residue of the previous states, set reset: true.

All styles present on the element before the first animation ran will be respected, and will be returned to those value after a reset.

Any inline styles set after an animation has run on that element will readily be overwritten by CrossAni, so be aware of that.

You can prevent this behaviour by calling element.removeCrossAni() after an animation. This will remove any residual styles from transitions, but leave your transitions intact.

You can then modify the styles, and call doTransition as usual, re-initing that elem's animations

How do I use it?

(1) Assign some states to your element

Any element that should be animated needs a transitions property with a key-value record of strings to state objects.

A state object contains the following things:

  • ms: the time it should take to finish transitioning to that state
  • easing: An easing function to use, all exported on the EASE object.
  • state: An object containing the CSS values to set on the element this state.
  • cutOff: (OPTIONAL) see behaviour above
  • reset: (OPTIONAL) see behaviour above

An example setup would be as follows:

const box = document.getElementById("box"); box.transitions = { default: { state: {}, ms: 500, easing: EASE.inOut, reset: true, cutOff: true, }, hover: { state: { transform: "scale(1.1)" }, ms: 250, easing: EASE.inOut, }, };

(2) Get animating!

You may call doTransition on an element to cause it to animate to a named state.

The first time you do this, CrossAni will take a note of inline styles, as described before.

For, example, to continue with our box example:

// ignore that this example could better be done // with a :hover selector, this is just for the demo box.onmouseover = () => box.doTransition("hover"); box.onmouseleave = () => box.doTransition("default");

(3) Build up complex transitions with ease

Promises make complexity into simplicity

async function introAnimation() { box.doTransition("moveright"); box.doTransition("slowgrop"); await box.doTransition("fadetextout"); box.innerText = "the text is now different"; box.doTransition("fadetextin"); await box.doTransition("makemassive"); }

What's the most performant?

opacity, transform, filter, as these are things that can be done in the compositor stage.

background-color and clip-path may be accelerated in Chrome too, but ensure to test in all browsers for optimum speed.

Either way, you're doing much better with CrossAni than JS animations, even if you're not getting the most blazing speed!

Non transform movements are slower as, although the browser is running the animation, repaints and often reflows are necessary, which are expensive.

To answer the more important question, what's the least performant, anything that could affect layout, such as margin, padding, width, height, font, flex attributes, etc.

How does CrossAni stack up?

Most benefits Motion One list also apply here:

  • super small
  • super smooth
  • not affected by JS execution freezing
  • high accuracy interpolation from the browser

But also, SVG d attributes still cannot be animated with CSS transitions.

Bundle size

All packages were ran through bundlejs with esm.sh as the cdn.

PkgRawGzipBrotli
crossani2.5kb1.12kb1.05kb
motion15.07kb6.34kb6.17kb
animejs17.59kb7.19kb6.99kb
gsap61.97kb24.45kb23.86kb

Features

FeatureCrossAniMotionAnimeJSGreensock
ValuesCSS transform
Named coloursPartial
Colour type convWrong interp
To/from CSS vars
To/from CSS funcs
Animate CSS vars
Simple keyframes❌ Soon?
Wildcard keyframesN/A
Relative values
OutputElement styles
Element attrs
Custom animations
OptionsDuration
Direction
Repeat
Delay
End delay
Repeat delay
StaggerStagger✅ +.1kb
TimelineTimeline✅ +.6kb
ControlsPlay
Pause
Finish
Reverse
Stop
Playback rate
EasingLinear
Cubic bezier
Steps
Spring simulation✅ +1kb
Glide✅ +1.3kb✅ $99/yr
Spring easing
Custom easings
EventsComplete
CancelFires above
Start
Update
RepeatN/A
PathMotion path✅ +9.5kb
Path morphing✅ lib✅ = #points✅ $99/yr
Path drawing✅ $99/yr
OtherlicenseMITMITMITCustom
GPU acceleration
IE11 (ew)
Frameworks
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc