Docs

Getting Started

Download SnapFoo and include it in your project after jQuery and Snap.svg. Once included, call the library for use by passing in the SVG container ID:

Arguments:

  • theSVGContainer {String}
var snapfoo = snapFoo("#theSVGContainer");

Animate

The primary animation call that receives an element or group of elements to animate based on the FramesObj object. Any element that is animated that does not have an ID is appended the class "sf[#]" for a unique identifier.

Arguments:

  • Element {String}
  • FramesObj {Object}
  • Callback {Function}
snapfoo.animate(element, framesObj, callback);
Return to Top

Animate - Element {String}

Use a jQuery-like selector to target which elements should be animated. SnapFoo will iterate over any matches found inside of theSVGContainer. Any element that is animated that does not have an ID is appended the class "sf[#]" for a unique identifier.

Target individual elements:

snapfoo.animate("#the-circle", FramesObj);

Select numerous elements:

snapfoo.animate(".the-circle, #the-square, .test-element", FramesObj);

Select elements by tag:

snapfoo.animate("circle", FramesObj);

Use other selector types:

snapfoo.animate("g > circle", FramesObj);
Return to Top

Animate - FramesObj {Object}

The FramesObj object stores the animation properties and any additional options.

Keys:

  • FramesObj {Object}
    • .frames {Array}
      • .frames.props {Object}
      • .frames.delay {Number}
      • .frames.duration {Number}
      • .frames.easing {Function}
    • callbackAt {String}
    • delay {Number}
    • duration {Number}
    • easing {Function}
    • loop {Boolean}
    • loopCount {Number}
    • reset {Boolean}
    • stagger {Number}

The minimum requirements include a .frames entry with the .props and .duration set. The other keys are set to defaults if not supplied.

var FramesObj = {
    frames: [
            {
                props: { transform: "t10,40" },
                duration: 1000
            }
    ]
};
Return to Top

Animate - frames {Array}

The frames array stores the information for each step of the animation. Add multiple entries to the frames array to create a sequence, with each entry being referred to as a 'frame'.

Values:

  • frames {Array}
    • .frames.props {Object}
    • .frames.delay {Number}
    • .frames.duration {Number}
    • .frames.easing {Function}
var FramesObj = {
    frames: [
            { props: { transform: "t10,40" }, duration: 500 },
	    { props: { transform: "t100,-40" }, delay: 250, duration: 1500 },
	    { props: { transform: "s2,2", opacity: .75 }, duration: 500, easing: mina.bounce }
    ]
};
Return to Top

Animate - frames.props {Object}

The props object supplies the function with the properties that are to be animated. These calls follow the standard syntax of SnapSVG. SnapSVG documentation for transforms can be found here.

var FramesObj = {
    frames: [
            { props: { transform: "t10,40" }, duration: 500 },
	    { props: { transform: "t100,-40" }, delay: 500, duration: 1500 },
	    { props: { transform: "s2,2", opacity: .75 }, duration: 500, easing: mina.bounce }
    ]
};
Return to Top

Animate - frames.delay {Number}

Set the delay of the frame in milliseconds.

Default: 0

var FramesObj = {
    frames: [
        { props: { transform: "t10,40" }, duration: 500 },
        { props: { transform: "t100,-40" }, delay: 500, duration: 1500 },
        { props: { transform: "s2,2", opacity: .75 }, delay: 150, duration: 500, easing: mina.bounce }
    ]
};
Return to Top

Animate - frames.duration {Number}

Set the duration of the frame animation in milliseconds.

var FramesObj = {
    frames: [
            { props: { transform: "t10,40" }, duration: 500 },
	    { props: { transform: "t100,-40" }, duration: 1500 },
	    { props: { transform: "s2,2", opacity: .75 }, duration: 500, easing: mina.bounce }
    ]
};
Return to Top

Animate - frames.easing {Function}

Each frame can be given a frame-specific easing function. If no easing is provided for the frame SnapFoo will default to the global easing function. The easing functions are the same as those found in SnapSVG. Examples of supported mina-type easings can be found at this CodePen.

Default: FramesObj.easing || mina.linear

var FramesObj = {
    frames: [
            { props: { transform: "t10,40" }, duration: 500, easing: mina.backin },
	    { props: { transform: "t100,-40" }, duration: 1500 },
	    { props: { transform: "s2,2", opacity: .75 }, duration: 500, easing: mina.bounce }
    ]
};
Return to Top

Animate - callbackAt {String}

When supplying a callback use the callbackAt property to specify when during the animation it should execute.

There are four options:

  • child: Will execute anytime a child finishes its final frame regardless of loops
  • child end: Will execute whenever a child completes its final loop
  • end: Will execute whenever the final child completes its final loop
  • loop: Will execute whenever the final child completes a loop

Default: end

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end'
    };
Return to Top

Animate - delay {Number}

Place a delay at the beginning of an animation in milliseconds.

Default: 0

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000
    };
Return to Top

Animate - duration {Number}

Enter the duration of the animation in milliseconds. If no frame-specific durations are set, the duration provided will be divided between the amount of frames and distributed evenly.

Default: 0

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000
    };
Return to Top

Animate - easing {Function}

Define a global easing function to be used across all frames. The easing functions are the same as those found in SnapSVG. Examples of supported mina-type easings can be found at this CodePen.

Default: mina.linear

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000,
        easing: mina.backout
    };
Return to Top

Animate - loop {Boolean}

Set this property to true if the animation should loop. After completing the final frame, the element will reset to its original position and repeat.

Default: false

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000,
        easing: mina.backout,
        loop: true
    };
Return to Top

Animate - loopCount {Number}

Setting the loopCount property will determine how many times a loop should complete before stopping.

Default: 0 (Infinite)

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000,
        easing: mina.backout,
        loop: true,
        loopCount: 3
    };
Return to Top

Animate - reset {Boolean}

The reset property determines if an element should remain in its final state or be reset to its original values after completing the animation. If an element is animated from big to small it will remain small after animating if reset is false; if true, it will reset to its original size.

Default: false

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000,
        easing: mina.backout,
        loop: true,
        loopCount: 3,
        reset: true
    };
Return to Top

Animate - stagger {Number}

If animating numerous objects use the stagger property to place a delay between each object before it begins its first frames. The value should be entered in milliseconds.

Default: 0

var FramesObj = {
        frames: [ ... ],
        callbackAt: 'child end',
        delay: 1000,
        duration: 5000,
        easing: mina.backout,
        loop: true,
        loopCount: 3,
        reset: true,
        stagger: 500
    };
Return to Top

Animate - callback {Function}

Provide a callback that will execute based upon the callbackAt value. Each callback is scoped to the animated element itself, so using $(this) will return the current element.

snapfoo.animate('circle', framesObj, function() {
    $(this).attr('fill','#000');
});
Return to Top

AnimatePath

Animate an element or group of elements along a path. Any element that is animated that does not have an ID is appended the class "sf[#]" for a unique identifier.

Arguments:

  • Element {String}
  • Obj {Object}
  • Callback {Function}
snapfoo.animatePath(element, obj, callback)
Return to Top

AnimatePath - element {String}

Use a jQuery-like selector to target which elements should be animated. SnapFoo will iterate over any matches found inside of theSVGContainer. Any element that is animated that does not have an ID is appended the class "sf[#]" for a unique identifier.

Target individual elements:

snapfoo.animatePath("#the-circle", obj, callback);

Select numerous elements:

snapfoo.animatePath(".the-circle, #the-square, .test-element", obj, callback);

Select elements by tag:

snapfoo.animatePath("circle", obj, callback);

Use other selector types:

snapfoo.animatePath("g > circle", obj, callback);
Return to Top

AnimatePath - obj {Object}

The obj object stores the animation properties and any additional options.

Keys:

  • obj {Object}
    • callbackAt {String}
    • delay {Number}
    • duration {Number}
    • easing {Function}
    • loop {Boolean}
    • loopCount {Number}
    • path {String}
    • reset {Boolean}
    • rewind {Boolean}
    • rewindDelay {Number}
    • rewindDuration {Number}
    • rewindEasing {Function}
    • stagger {Number}

The minimum requirements include a .path and .duration property set. The other keys are set to defaults if not supplied.

var obj = {
    duration: 2500
    path: '#wave-path',
};
Return to Top

AnimatePath - callbackAt {String}

When supplying a callback use the callbackAt property to specify when during the animation it should execute.

There are four options:

  • child: Will execute anytime a child finishes its final frame regardless of loops
  • child end: Will execute whenever a child completes its final loop
  • end: Will execute whenever the final child completes its final loop
  • loop: Will execute whenever the final child completes a loop

Default: end

var obj = {
    callbackAt: 'loop',
    duration: 2500,
    path: '#wave-path'
};
Return to Top

AnimatePath - delay {Number}

Place a delay at the beginning of an animation in milliseconds.

Default: 0

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    path: '#wave-path'
};
Return to Top

AnimatePath - duration {Number}

Set the duration of the animation in milliseconds.

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    path: '#wave-path'
};
Return to Top

AnimatePath - easing {Function}

Define a global easing function to be used across all frames. The easing functions are the same as those found in SnapSVG. Examples of supported mina-type easings can be found at this CodePen.

Default: mina.linear

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    path: '#wave-path'
};
Return to Top

AnimatePath - loop {Boolean}

Set this property to true if the animation should loop. After completing the path, the element will reset to its original position and repeat.

Default: false

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    path: '#wave-path'
};
Return to Top

AnimatePath - loopCount {Number}

Setting the loopCount property will determine how many times a loop should complete before stopping.

Default: 0 (Infinite)

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path'
};
Return to Top

AnimatePath - path {String}

Pass a string of a class name or ID of the path over which the elements should animate.

Default: 0 (Infinite)

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path'
};
Return to Top

AnimatePath - reset {Boolean}

The reset property determines if an element should remain in its final state or be reset to its original values after completing the animation. If an element animates from left to right it will remain at its right position if obj.reset is false. If true, it will return to its original left position upon completing its animation.

Default: false

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reset: true
};
Return to Top

AnimatePath - rewind {Boolean}

Once an element completes its path animation in one direction, if the rewind property is true, the element will be animated backwards along the path to its original position.

Default: false

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reset: true,
    rewind: true
};
Return to Top

AnimatePath - rewindDelay {Number}

A delay can be added in milliseconds before a rewind animation begins.

Default: 0

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reset: true,
    rewind: true,
    rewindDelay: 250
};
Return to Top

AnimatePath - rewindDuration {Number}

By default, the rewind animation will use the same duration value as the initial animation. However, the rewindDuration property can be set to have a different behavior on the rewind.

Default: obj.duration

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reset: true,
    rewind: true,
    rewindDelay: 250,
    rewindDuration: 1000
};
Return to Top

AnimatePath - rewindEasing {Function}

By default, the rewind animation will use the same easing function as the initial animation. However, the rewindEasing property can be set to have a different behavior on the rewind.

Default: obj.easing || mina.linear

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reset: true,
    rewind: true,
    rewindDelay: 250,
    rewindDuration: 1000,
    rewindEasing: mina.backout
};
Return to Top

AnimatePath - reverse {Boolean}

Setting the reverse property to true allows the element to begin at the end of the path and animate to the beginning.

Default: false

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    reverse: true
};
Return to Top

AnimatePath - stagger {Number}

If animating numerous objects use the stagger property to place a delay between each object before its animation begins. The value should be entered in milliseconds.

Default: 0

var obj = {
    callbackAt: 'loop',
    delay: 500,
    duration: 2500,
    easing: mina.backin,
    loop: true,
    loopCount: 3,
    path: '#wave-path',
    stagger: 500
};
Return to Top

AnimatePath - callback {Function}

Provide a callback that will execute based upon the callbackAt value. Each callback is scoped to the animated element itself, so using $(this) will return the current element.

snapfoo.animatePath('circle', obj, function() {
    $(this).attr('fill','#000');
});
Return to Top