When we talk about progress we mean the progress of the animation. 0% progress represents the start of the animation while 100% progress is the end of the animation.

Animation jumping

Animations jump, for example, from 70% to 85% progress. This is a jump of 15%. Big Animation jumps can cause animation ghosting when animations end between the jumps. See animation ghosting for more information.

Animation ghosting

Animation ghosting is when an animation is displaying a previous frame. This can be caused by animation jumping. Animations only update between assigned Jarallax keys. When an animation leaves the range of jarallax keys it doesn’t get updated. This will cause the last frame to stay active while the animation isn't updating. This can be prevented by setting a default value.

Animation position

The current position of the Jarallax instance, internally know as Jarallax.progress. This is affected by the Jarallax controller.

Animation range

This is the range of the progress of the Jarallax keys. An animation sequence starting with a progress of 10% and ending with a progress of 80% makes the animation range from 10% to 80%.

Animation sequence

An array contains multiple Jarallax keys. You use this array usually as second argument. An animation sequence is active when it’s pushed and the animation position is within the animation range.

Jarallax controller

The object which is manipulating the animation position of the Jarallax instance. These objects are usually pushed when creating the Jarallax instance.

Jarallax key

A position in Jarallax containing progress position, CSS style data, optional event data and animation style data.

Blind key

A Jarallax key without any position and event data. Used in the Jarallax.setDefault method where no progress position is needed. These keys are blind because they don’t know where they are. Blind keys can’t be used in the Jarallax.addAnimation method.

Active keys

When the animation position is between 2 Jarallax keys, these two keys are the active keys. Each active animation sequence does have 2 active keys.

Event keys

Event keys refer to the key where the event is defined and the Jarallax key after this key. Assigned events only apply to event keys. Other keys won’t dispatch any events.

Un-animate-able style

Jarallax doesn’t know how to animate some CSS styles, like the ‘display’ property. This is because there is no transition between display:block and display:none. Un-animate-able styles are implemented as non animated styles.

Non animated style

When css styles are set in jarallax keys but aren’t changing at all. An animation is automatically computed as a non animated style when the second active key doesn't have a corresponding end CSS style.