My Plugins List
Closed this issue · 0 comments
dalisoft commented
Here the my plugins that can be ported from my old js
SuperAnimation.DocJSON = {
"squash": {
"id": 1,
"status": "Stable",
"credit": null,
"desc": {
"api": "Add bounce-ball like squash and bouncing",
"value": {
"strength": "Strength of squashing, lower value agressive bouncing",
"easeType": "Easing type of squash & bouncing",
"useGravity": "Physics gravity like bouncing",
"disableBounciness": "Use non-bounce easing for some serius large application",
"customEasing": "Custom easing function for better XP",
"backToStart": "Animation end state back to start",
"manualPhysicOffset": "Add physic margin for better XP",
"noScale": "Disable scaling while bouncing",
"addMove": "Moves node to that move",
"moveDirection": "addMove direction, can be x, y, rotate, etc."
}
},
"value": {
"default": {
"strength": 0.7,
"easeType": "BounceOut",
"useGravity": false,
"disableBounciness": false,
"customEasing": null,
"backToStart": false,
"manualPhysicOffset": 0,
"noScale": false,
"addMove": 0,
"moveDirection": null
},
"recommend": "true or {} (uses default param)",
"userValue": {
"strength": 0.6,
"easeType": "One of in, out, inOut, gravity",
"useGravity": true,
"disableBounciness": false,
"customEasing": "SuperAnimation.Easing.ExpoInOut",
"backToStart": false,
"manualPhysicOffset": 10,
"noScale": false,
"addMove": 20,
"moveDirection": "y"
}
}
},
"keyframe": {
"id": 2,
"status": "Stable",
"credit": null,
"desc": {
"api": "JS Implementation of CSS Animation keyframe",
"value": "Object pack as percent and value of animation"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"0": {
"x": 0
},
"30": {
"x": -50
},
"100": {
"x": 100
}
}
}
},
"classr": {
"id": 3,
"status": "Stable",
"credit": null,
"desc": {
"api": "CSS Class tweening",
"value": "with/without relative class name"
},
"value": {
"default": "node class name",
"recommend": null,
"userValue": "newclass"
}
},
"roundValue": {
"id": 4,
"status": "Stable",
"credit": null,
"desc": {
"api": "Rounds property value while tweening",
"value": "Object contains property and true if round need"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"property": 1
}
}
},
"changeValue": {
"id": 5,
"status": "Stable",
"credit": null,
"desc": {
"api": "Changes property value while tweening",
"value": "Object contains property and functions for returning new value"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"property": "function(value){ return Math.sin(value); }"
}
}
},
"drag": {
"id": 6,
"status": "Stable",
"credit": null,
"desc": {
"api": "Add support for drag node with mouse",
"value": {
"min": "Minimum x/y position of drag",
"max": "Maximum x/y position of drag",
"defaultValue": "Default x/y position of node",
"stepize": "Function for control over tracked x/y position while dragging",
"gridStep": "Function for control over tracked x/y position after drag release"
}
},
"value": {
"default": {
"min": {
"x": -999,
"y": -999
},
"max": {
"x": 999,
"y": 999
},
"defaultValue": {
"x": 0,
"y": 0
},
"stepize": null,
"gridStep": null
},
"recommend": {},
"userValue": {
"min": {
"x": -500,
"y": -500
},
"max": {
"x": 500,
"y": 500
},
"defaultValue": {
"x": 0,
"y": 50
},
"stepize": "function (e) { e.x *= 9; return e; }",
"gridStep": "function (e, defaultE) { e.y *= 2; return e; }"
}
}
},
"scroll": {
"id": 7,
"status": "Stable",
"credit": null,
"desc": {
"api": "Scrolling plug-in lets you scroll to any position or node",
"value": "Object contains number of y-position or object contains both x/y positions"
},
"value": {
"default": "Current position of scroll",
"recommend": null,
"userValue": {
"x": 25,
"y": 215
}
}
},
"attr": {
"id": 8,
"status": "Stable",
"credit": null,
"desc": {
"api": "Attribute tweening of node",
"value": "Object contains new attribute value"
},
"value": {
"default": "Current attribute of node",
"recommend": null,
"userValue": {
"data-x": 12
}
}
},
"event": {
"id": 9,
"status": "RC",
"credit": null,
"desc": {
"api": "Animation by Event listener",
"value": "Object contains state with object of new value"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"mousedown": {
"scale": 0.8,
"options": {
"easing": "ExpoInOut"
},
"action": "function (e) { this.innerHTML = \"mousedown\"; }"
}
}
}
},
"typer": {
"id": 10,
"status": "RC",
"credit": null,
"desc": {
"api": "Typing effect",
"value": {
"splitter": "Split character for typing",
"scrambleMode": "Scramble effect mode state",
"scrambleWord": "typer#scrambleMode Scrambling word",
"offRandom": "Last character randomize for better looking",
"text": "Value of new text"
}
},
"value": {
"default": {
"splitter": "",
"scrambleMode": false,
"scrambleWord": "Typer",
"offRandom": false,
"text": "Current text"
},
"recommend": "{text:TEXT_HERE}",
"userValue": {
"text": "TEXT_HERE"
}
}
},
"tricle": {
"id": 11,
"status": "Stable",
"credit": null,
"desc": {
"api": "Interesting API for some loader or snippets",
"value": {
"count": "Count of circle",
"type": "Tagname of circles",
"opacityReduction": "Threshold of opacity reduce per circle",
"defaultOpacity": "Default circle opacity threshold",
"defaultTricleSize": "Default circle threshold size"
}
},
"value": {
"default": {
"count": 3,
"type": "div",
"opacityReduction": 0.15,
"defaultOpacity": 0.75,
"defaultTricleSize": 0.25
},
"recommend": null,
"userValue": {
"count": 2,
"type": "div",
"opacityReduction": 0.25,
"defaultOpacity": 1,
"defaultTricleSize": 0.35
}
}
},
"sprite": {
"id": 12,
"status": "Stable",
"credit": null,
"desc": {
"api": "Sprite animation plug-in for images",
"value": {
"dir": "Direction of sprite",
"src": "Image of sprite",
"width": "Sprite node width (not image width)",
"height": "Sprite node height (not image height)",
"widthLength": "Sprite image width !(not node width)",
"heightLength": "Sprite image height !(not node height)"
}
},
"value": {
"default": {
"dir": "[\"right\"]",
"src": "CSS Background image (if DOMPlugin loaded)",
"width": null,
"height": null,
"widthLength": "width of sprite node",
"heightLength": "height of sprite node"
},
"recommend": null,
"userValue": {
"width": 240,
"height": 314,
"widthLength": 1200,
"heightLength": 1570
}
}
},
"three": {
"id": 13,
"status": "Stable",
"credit": null,
"desc": {
"api": "THREE.js plug-in for easier using",
"value": "{property:value} of your tween"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"rotation": {
"x": 100,
"y": 100
},
"scale": {
"x": 4,
"y": 4,
"z": 3
}
}
}
},
"babylon": {
"id": 14,
"status": "Alpha",
"credit": null,
"desc": {
"api": "Babylon.js plug-in for easier using",
"value": "{property:value} of your tween"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"rotation": {
"x": 100,
"y": 100
},
"scale": {
"x": 4,
"y": 4,
"z": 3
}
}
}
},
"pixi": {
"id": 15,
"status": "Alpha",
"credit": null,
"desc": {
"api": "Pixi.js plug-in for easier using",
"value": "{property:value} of your tween"
},
"value": {
"default": null,
"recommend": null,
"userValue": {
"rotation": 90
}
}
},
"polyMorph": {
"id": 16,
"status": "Stable",
"credit": {
"user": "colinmeinke",
"link": "https://github.com/colinmeinke/wilderness"
},
"desc": {
"api": "SVG Polygon/Polyline Morphing",
"value": {
"shape": "Shape of morphing",
"moveIndex": "move index of shape points",
"reverse": "Reverse shape points"
}
},
"value": {
"default": {
"shape": "Current shape",
"moveIndex": 0,
"reverse": false
},
"recommend": null,
"userValue": {
"shape": "#polygon2"
}
}
},
"shapeMorph": {
"id": 17,
"status": "Stable",
"credit": {
"user": "colinmeinke",
"link": "https://github.com/colinmeinke/wilderness"
},
"desc": {
"api": "SVG Shape Morphing",
"value": {
"shape": "Shape of morphing",
"precision": "Precision of shape points (lower precision, more point)",
"moveMap": "Shape mapping",
"useSVGPoints": "Lets you make more natural morphing",
"disableStyleMorph": "Disables shape style morphing",
"keepOriginalPath": "After morphing finished, keep original d attribute",
"disableComplexity": "Enable if shape looks unnatural",
"showIndex": "Show circle on start index",
"moveIndex": "move index of shape points",
"reverse": "Reverse shape points",
"flattenTransforms": "Flatten/Merges transforms into shape path",
"mapOrder": "Pops and/or Shifts and/or moves the order of path on SVG Groups and Multi-points shapes"
}
},
"value": {
"default": {
"shape": "Current shape",
"precision": "4 (if useSVGPoints enabled, else no default precision)",
"moveMap": "length",
"useSVGPoints": false,
"disableStyleMorph": false,
"keepOriginalPath": true,
"disableComplexity": false,
"showIndex": false,
"moveIndex": "auto-matches index",
"reverse": false,
"flattenTransforms": false,
"mapOrder": 0
},
"recommend": {
"disableComplexity": false,
"keepOriginalPath": true,
"useSVGPoints": true,
"moveMap": "auto or length or complexity"
},
"userValue": {
"shape": "#shape2",
"moveIndex": 3,
"reverse": true,
"useSVGPoints": true,
"precision": 3
}
}
},
"drawStroke": {
"id": 18,
"status": "Stable",
"credit": null,
"desc": {
"api": "SVG Stroke drawing",
"value": {
"offset": "Offset of value (start/end/length/interval)",
"fadeStroke": "Show stroke after drawing done",
"fadeFill": "Show fill after drawing done"
}
},
"value": {
"default": {
"offset": "Current shape stroke-dasharray",
"fadeStroke": false,
"fadeFill": false
},
"recommend": null,
"userValue": {
"offset": "50% 85%"
}
}
},
"waveSVG": {
"id": 19,
"status": "Stable",
"credit": {
"user": "osublake",
"link": "http://codepen.io/osublake/pen/957a0e49b1690d1946cba33e0e52f885?editors=0010"
},
"desc": {
"api": "SVG Sine Wave",
"value": {
"amplitude": "Amplitude of wave",
"frequency": "Frequency of wave",
"segment": "Segment count",
"width": "width of wave container",
"height": "height of wave container"
}
},
"value": {
"default": {
"amplitude": 45,
"frequency": 4,
"segment": 150,
"width": "100%",
"height": 150
},
"recommend": null,
"userValue": {
"amplitude": 80,
"frequency": 3
}
}
},
"waveSine": {
"id": 20,
"status": "Stable",
"credit": {
"user": "olizilla",
"link": "https://gist.github.com/olizilla/4240271"
},
"desc": {
"api": "SVG Sine Wave",
"value": {
"amplitude": "Amplitude of wave",
"frequency": "Frequency of wave",
"segmentCount": "Segment count",
"width": "width of wave container",
"height": "height of wave container"
}
},
"value": {
"default": {
"amplitude": 40,
"frequency": 8,
"segmentCount": 150,
"width": 1200,
"height": 300
},
"recommend": null,
"userValue": {
"amplitude": 80,
"frequency": 7
}
}
},
"curver": {
"id": 21,
"status": "Stable",
"credit": null,
"desc": {
"api": "Bezier curve points interpolation",
"value": {
"shape": "Points of curve",
"useRotate": "Rotates node when curve is rotated"
}
},
"value": {
"default": {
"useRotate": false
},
"recommend": null,
"userValue": {
"shape": [{
"x": 0,
"y": 0
}, {
"x": 50,
"y": 100
}
]
}
}
},
"alongPath": {
"id": 22,
"status": "Stable",
"credit": {
"user": "colinmeinke",
"link": "https://github.com/colinmeinke/points#position"
},
"desc": {
"api": "Animate target along path aka MotionPath",
"value": {
"shape": "Target shape that need along that path",
"useRotate": "Rotates node when curve is rotated"
}
},
"value": {
"default": {
"useRotate": false
},
"recommend": null,
"userValue": {
"shape": "#motionPath1",
"useRotate": true
}
}
},
"siriWave": {
"id": 23,
"status": "Stable",
"credit": {
"user": "caffeinalab",
"link": "https://github.com/caffeinalab/siriwavejs"
},
"desc": {
"api": "Apple Siri like Wave",
"value": {
"width": "width of wave",
"height": "height of wave",
"speed": "Speed of wave",
"amplitude": "Amplitude of wave",
"hideAtDone": "Hide wave when tween ends"
}
},
"value": {
"default": {
"width": "Container width",
"height": "Container height",
"speed": 0.2,
"amplitude": 1,
"hideAtDone": true
},
"recommend": null,
"userValue": {
"width": 259,
"height": 40
}
}
},
"domPlugin": {
"id": 24,
"status": "Stable",
"credit": null,
"desc": {
"api": "Enables CSS Tweening/Animation, Current style offset"
},
"value": null
}
}
If you like one or more of these, leave review, so i will give you code and we together (or you) port the API to es6-tween, this would be amazed