Animation API

An animation changes a single object property over time.

Example: Animatable Properties
Example: Control Animations

Start an Animation

Call the animate() method of the object you want to animate.

var myanimation = myobject.animate(
	'location',			// property to animate
	{ lat: 40.689, lng: -74.046 },	// end value
	{
		duration : 200,		// animation properties
		relativeDuration : 400,
		easing : "out-quad",
		complete : function () {
			console.log( 'animation complete' );
		}
	}
);

Animation Properties

duration (float)

400

In milliseconds.

relativeDuration (float)

0

Adds a duration depending on the difference from start to end value. For lat/lng properties the relativeDuration is added as milliseconds per 1000 kilometers distance from start to end location.

easing (easing)

"in-out-quad"

An easing function that describes how the property changes over time.
See Easing Functions

loop (boolean)

false

Makes the animation jump back to the start value when it completes.

oscillate (boolean)

false

When used together with loop: true the animation is played back and forth.

paused (boolean)

false

Interrupts animation playback.

complete (function)

Function to call when the animation completes.

// shrink and remove marker
mymarker.animate( 'scale', 0.01, {
	complete : function( ani ) {
		this.remove();
	}
} );
this refers to the animated object.
The first parameter refers to the AnimationInstance.

Advanced:

time (float)

0.0

0.0 - 1.0

Current time of the animation as value from 0 to 1.

target (Earth, Marker, Image, Sprite, Points, Line or Overlay)

Reference to the animated object.

lerpLatLng (boolean)

false

This property only effects the animation of lat/lng properties like a object's location. If lerpLatLng is true the lat/lng number values are interpolated (avoiding the polar regions) instead of the 3d position (shortest path).
Example: Animation lerpLatLng

 
The earth's goTo() method provides two special animation properties (approachAngle and zoom).
 
You can add custom properties that are copied over to the AnimationInstance. 
mymarker.animate( 'scale', 2, {
	duration: 800,
	complete : myCompletionAlert,
	myAlertMessage : 'Animation Complete!'
} );

function myCompletionAlert( ani ) {
	alert( ani.myAlertMessage );
}

Animation Methods

stop( triggerComplete, jumpToEnd )

triggerComplete
(boolean) default: false | Calls the complete function
jumpToEnd
(boolean) default: false | Sets the property immediately to the end value
var fadeout_ani = mymarker.animate( 'opacity', 0 );

// stop fadeout if clicked
mymarker.addEventListener( 'click', function() {
	if ( fadeout_ani ) fadeout_ani.stop();
	this.opacity = 1;
} );
 
You can stop all animations of an object with its stopAllAnimations() method.

Easing Functions

Easing functions describe how properties change over time.
Example: Animation Easing

linear

No easing. The animation plays at constant speed.

in-quad, in-cubic or in-quart

The animation starts slowly.

out-quad, out-cubic or out-quart

The animation ends slowly.

in-out-quad, in-out-cubic or in-out-quart

The animation starts and ends slowly.

in-back, out-back or in-out-back

The animation overshoots the start and/or end value.

elastic

Rubber band effect

bounce

Rubber ball effect

arc

This special easing function reaches the end value at half time and returns to the start value.
It is useful to draw lines as arcs with a line's offsetFlow/offsetEasing property.

 
You can add your own easing functions, with time as the only parameter. 
Earth.Animation.Easing['my-special-easing'] = function ( time ) {
	// time is a value from 0 to 1 you need to modify here
	return time;
};