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.
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.
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().
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.
Sequencing animations is just as easy. Let's rewrite that last example as a sequence.
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.
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.
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
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.
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.
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.
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:
And rewritten with the keyframe syntax:
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.