Closed dalisoft closed 7 years ago
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
Here the my plugins that can be ported from my old js
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