Propery path of type String, SVGPathElement, Object
Defines motion path or arc to animate el's position.
Can be defined
CSS selector:
SVG line commands:
SVGPathElement:
Arc shift:
Propery curvature of type Object
Defines curve size for path defined by arc shift.
Curvature amount can be defined by number representing px
or percents(string) representing amount relative to shift length.
Example:
{ x: 200, y: 100 } or { x: '50%', y: '20%' } or mix
Example:
// will fallback to defaults for omitted axes
{ x: 200 } // fallbacks to { x: 200, y: '50%' }
{ y: '25%' } // fallbacks to { x: '75%', y: '25%' }
of type Boolean
Defines if composite layer should be forced on el to prevent paint during animation.
Propery delay of type Number
Delay before animation starts, ms
Propery duration of type Number
Duration of animation, ms
Propery easing of type String, Function, Array
Easing. The option will be passed to tween.parseEasing method. Please see the tween module for all avaliable options.
String:
Bezier cubic curve:
Custom function:
Propery repeat of type Integer
Animation repeat count
Propery yoyo of type Boolean
Defines if animation should be alternated on repeat.
Propery offsetX of type Number
Defines additional horizontal offset from center of path, px
Propery offsetY of type Number
Defines additional vertical offset from center of path, px
Propery angleOffset of type Number, Function
Defines angle offset for path curves
Example:
// function
new MotionPath({
//...
angleOffset: function(currentAngle) {
return if (currentAngle < 0) { 90 } else {-90}
}
});
Number:
Function:
Propery pathStart of type Number
Defines lower bound for path coordinates in rangle [0,1] So specifying pathStart of .5 will start animation form the 50% progress of your path.
Example:
// function
new MotionPath({
//...
pathStart: .5
});
Propery pathEnd of type Number
Defines upper bound for path coordinates in rangle [0,1] So specifying pathEnd of .5 will end animation at the 50% progress of your path.
Example:
// function
new MotionPath({
//...
pathEnd: .5
});
Propery motionBlur of type Number
Defines motion blur on element in range of [0,1]
Propery transformOrigin of type String, Function
Defines transform-origin CSS property for el. Can be defined by string or function. Function recieves current angle as agrumnet and should return transform-origin value as a strin.
Example:
// function
new MotionPath({
//...
isAngle: true,
transformOrigin: function (currentAngle) {
return 6*currentAngle + '% 0';
}
});
Function:
Propery isAngle of type Boolean
Defines if path curves angle should be set to el.
Propery isReverse of type Boolean
Defines motion path direction.
Propery isRunLess of type Boolean
Defines if animation should not start after init. Animation can be then started with calling run method.
Please see at codepen for proper results:
Propery isPresetPosition of type Boolean
Defines if el's position should be preset immediately after init. If set to false el will remain at it's position until actual animation started on delay end or run method call.
Propery onStart of type Function
Callback onStart fires once if animation was started.
Propery onComplete of type Function
Callback onComplete fires once if animation was completed.
Propery onUpdate of type Function
Callback onUpdate fires every raf frame on motion path update. Recieves progress of type Number in range [0,1] as argument.
reset motionBlur for safari and IE
Method curveToPath
Method to transform coordinates and curvature to svg path
Parameters:
coordinates
must be an Object.coordinates
must be an Object.Returns a SVGElement
(svg path)
get point on line between start end end
get control point with center in curveXPoint
clamp motionBlur in range of [0,1]
get x and y coordinates
get real coordinates relative to container size
call onUpdate but not on the very first(0 progress) call
set position and angle 1: if motion path is for module
2: if motion path is for DOM node
if string was returned from the onUpdate call
transform origin could be a function
if previous coords are not defined yet -- set speed to 0
else calculate speed based on the largest axes delta
get blur based on speed where 1px per 1ms is very fast and motionBlur coefficient
save previous coords
don't copy callbacks and tween options(only duration) get prev options if not defined
if property is callback and not defined in then options - define it as undefined :) to override old callback, because we are inside the prevOptions hash and it means the callback was previously defined
get animation timing values to feed the tween
copy all props, if prop is duration - fallback to previous value
x: Math.cos(radAngle), y: Math.sin(radAngle)
class MotionPath
MotionPath
Class for moving object along path or curve