The core effects file

Like the individual components themselves, the effects require the services of a separate core file. It provides essential functionality to the effects, such as creating wrapper elements and controlling the animations. Most, but not all, of the effects have their own source files, which build on the core foundation to add functionality specific to the effect.

All we need to do to use an effect is include the core file (effects.core.js) in the page before the effect's source file. Unlike the ui.core.js file however, the effects.core.js file has been designed to be used, in part, completely standalone.

When using the core effect file on its own we can take advantage of color animations. This includes changing the background color of an element into another color (and not just a snap change but a smooth morphing of one color into another), class transitions, and advanced easing animations.

Using color animations

Let's look at creating color animations. First; create the following...