notoriousb1t

Just Animate 1.0.0 beta!

I'm happy to say that after months at work Just Animate 1.0.0 is ready for beta! I realized a few months ago that I needed to do a major reworking of the API to make it a clear choice for motion design. Here are some of the exciting changes in this release:

Compact and Readable Animations

One of the biggest changes since 0.6.2 is in philosophy. Instead of being 100% consistent with the Web Animations API's way of doing things, I have looked at the other tooling for animation and designed a better experience for motion designers and developers.

To From Properties

Instead of using a duration and offsets for everything, Just Animate now uses a to and from properties for the animation as a whole, but still allows offsets inside of keyframes.

See the Pen To-From Properties - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

In the above CodePen, the animation is from 0 seconds to 6 seconds. The "pixl" (the purple box guy) rotates and moves to the right until 25% of the animation, moves and rotates to the left until 75% of the animation, and then resets to the starting position until 100% of the animation. As seen in the example above, to and from can be either a number of milliseconds or a string containing time notation ('2s' = 2 seconds). In this example, we could remove the from property since it is 0 and that is the default value.

Improved Timelines

The to-from change allowed Just Animate to be greatly simplified for creating sequences and timelines. To combine several animations at once, pass an array of animation options to .animate().

See the Pen Simple Timeline- Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

In the CodePen, the red pixl fades out for 1 second, the blue one fades out at 1.5 seconds, and then both pixls fade back in at 3 seconds. Overall, I think this is an eloquent way to perform related animations together.

Intuitive Sequences

Sequencing animations is just as easy. Let's rewrite that last example as a sequence.

See the Pen Simple Sequence - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

Each subsequent animation starts when the last one ends. The result is identical to the timeline example except that there is no need for manual tweaking of to-from properties.

Property Syntax

To make the code easier to write, I added another way to animate other than keyframes. Instead of using an array in the css property, an object can be used instead.

See the Pen CSS Properties - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

In the CodePen above, clicking on the green pixl rotates a full 360 degrees. To make it easier to deal with transforms, Just Animate has shorthand properties for all transform functions. The rotate property in the example above is expanded to

See the Pen CSS Properties (Expanded) - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

The property syntax is a lot easier to read and is more compact. I'm still working out some issues resolving how to deal with uneven sets of transform functions, but I expect to figure this out pretty soon.

Better functionality for Common Cases

In addition to improving the way that timelines, sequences, and properties work, Just Animate has some powerful new features.

Mixins

Just Animate 0.6.2 had the ability to create reusable animations. In Just Animate 1.0.0, this has been replaced by mixins. Mixins allow multiple groups of reusable properties to be woven together to create animations. Just Animate has over 85 mixins available.

See the Pen Mixin Example - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

These mixins are intended to speed up prototyping and to empower beginners to animate straight away, but there is a more powerful aspect to mixins.

See the Pen Mixins Together! - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

In the CodePen, I combined two sets of properties to create an animation. This feature can be used to create reusable animations or to describe behaviors of an animation. There is still work to do with combining transform functions (same as above), but I hope to have that worked out soon.

Properties as Functions

When animating a group of targets, it is handy to calculate some of the values to make it seem more realistic or to add some slight variation. Just Animate makes it easy to calculate just about any CSS property when an animation is first run. Here are some ideas of things you can do with the property syntax:

See the Pen Property Objects with Functions - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

And rewritten with the keyframe syntax:

See the Pen Keyframe Syntax with Functions - Just Animate by Christopher Wallis (@notoriousb1t) on CodePen.

In the keyframe example, I replaced the delay function with a special time notation that you can use with delays. When you say += a number, it plays the first target with a delay of 0 and then subsequent targets with that number time the index. Since delays like these are common, I added that in to make it easy to add variation in delays.

Looking for Contributors

Ultimately, I want to make Just Animate the go to tool for motion designers on the web. I need help to make this dream a reality. If you want to help, message me on Twitter or put in an issue or pull request on GitHub.