This plugin for Keyframes generates complex movement paths.
import Pathfinder from '@keyframes/pathfinder';
Keyframes.plugin(Pathfinder);
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');
};
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');
};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');
};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;http://jsfiddle.net/krazyjakee/N652c/ - Bubbles in space game.
http://jsfiddle.net/krazyjakee/fwnuys9j/ - CSS3 Loader