Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Keyframes.Pathfinder

This plugin for Keyframes generates complex movement paths.

Installation

import Pathfinder from '@keyframes/pathfinder';
Keyframes.plugin(Pathfinder);

Usage

Simple Bezier Curve

Keyframes.bezierPath( rules, [startX,startY], [endX,endY], [pullX,pullY] );

Super simple example:

var rules = Keyframes.bezierPath( { name: 'curvy' } , [1,1], [400,1], [200,300] );
Keyframes.define([rules]);
window.onload = () => {
  const block = document.querySelectorAll('.block1')[0];
  block.play('curvey 5s ease 0 1 normal forwards');
};

Advanced Bezier Curve

Keyframes.bezierPath( rules, [startX,startY], [endX,endY], [pull1X,pull1Y], [pull2X,pull2Y] );

Simple example:

var rules = Keyframes.bezierPath( { name: 'curvyplus' }, [1,100], [800,100], [400,-100], [50, 600]);
Keyframes.define([rules]);
window.onload = () => {
  const block = document.querySelectorAll('.block1')[0];
  block.play('curveyplus 5s ease 0 1');
};

Circular Paths

Keyframes.circlePath( rules, [centerX, centerY], radius);

Simple Example:

var rules = Keyframes.circlePath( { name: 'circular' }, [100, 100], 40);
Keyframes.define([rules]);
window.onload = () => {
  const block = document.querySelectorAll('.block1')[0];
  block.play('circular 5s linear 0 infinite');
};

Options

By default the paths are set to 100 steps, but you can change them to suit your needs...

Keyframes.pathfinderOpts.bezierSteps = 100;
Keyframes.pathfinderOpts.circleSteps = 100;

Toys

http://jsfiddle.net/krazyjakee/N652c/ - Bubbles in space game.

http://jsfiddle.net/krazyjakee/fwnuys9j/ - CSS3 Loader

About

A plugin for jQuery.Keyframes that generates complex movement paths

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.