+
+
+
diff --git a/LICENSE.md b/LICENSE.md
deleted file mode 100644
index 8bb1fda7..00000000
--- a/LICENSE.md
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Jonas Sandstedt, Xavier Foucrier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/README.md b/README.md
index 18846dde..d0d030bc 100644
--- a/README.md
+++ b/README.md
@@ -1,64 +1,4 @@
-# mojs.github.io – [](https://github.com/mojs/mojs.github.io/actions/workflows/deploy-docs.yml)
+# mojs.github.io
+This is the deployed branch for mo · js. To edit the source files. Checkout to the source branch.
-Website for tutorials and documentation.
-
-[](https://mojs.github.io/)
-
-## Get started
-* Run `npm i` to install all dependencies
-* Run `npm run dev` to run the project locally at `http://localhost:8080`, your browser will open the URL automatically
-
-## Deploy
-* Run `npm run build`
-* Try the build locally using `npx serve docs/.vuepress/dist`
-* Automatic deployment through Github Actions on the `main` branch
-
-## Tips for docs writers
-If you need very special demo that doesn't work with the `` or the `MojsInteractive` components, create a new one and add it to the "components" folder. Make sure the name doesn't contain a number, VuePress doesn't like that.
-
-### Known bugs
-* If you get an `Unknown custom element` or any other weird errors, try restarting VuePress by stopping the process in your terminal, then run `npm run dev` again to clear the VuePress cache. It's probably due to some JS error in a custom component that you used to wrote.
-
-* If you get an `Errors compiling template: tag
has no matching end tag.` error, make sure you have a double line break before any HTML comments (`
-```
-
-### Conversion guide
-Guide to convert jsx pages from the old mojs website to markdown.
-
-#### Use find and replace in the file:
-- `(.+?)` replace with `[$2]($1)`
-- `` replace with `> ` (make sure to remove the newline too)
-- `` replace with ``
-- `(.+?)` replace with "`$1`"
-- `
(.+?)
` replace with `# $1`
-- `` replace with ``
-- `https://github.com/legomushroom/mojs/blob/master/api/` replace with `/api/`
-- `` and `` replace with
-```html
-
-[Link to pen](https://codepen.io/sol0mka/pen/$1)
-```
-- `` replace with ``
-- `` replace with `// pen $1 \n```js`
-- `` replace with "```"
-- ` or MojsInteractive element
-
-Happy coding with `mojs` :tada:
+
diff --git a/api/easing/approximate.html b/api/easing/approximate.html
new file mode 100644
index 00000000..de5d36d2
--- /dev/null
+++ b/api/easing/approximate.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Approximate | mo.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The approximate function samples any given function with slow running time and returns new easing function with very fast one. The result still slower than base easing functions and may contain a tiny approximation error (by default less than 0.0001).
The syntax:
var fastEasing = mojs.easing.approximate( slowEasing, n =4);
+ // where `n` is optional quantity of samples as `10^n` (larger `n` - smaller error).
+
Another strategy for the approximate function is to feed it with precomputed JSON data to same CPU pressure from presampling the slow function:
var samples =require('./samples.json');
+ var fastEasing = mojs.easing.approximate( slowEasing, samples );
+ // where `samples` is `JSON` object that contains presampled data.
+
You can have the presampled data by calling getSamples function:
var fastEasing = mojs.easing.approximate( slowEasing );
+ var samples = fastEasing.getSamples();
+
The base easing functions could be expressed with strings that contain easing name and direction delimited by . or could be accessed directly on mojs.easing object:
The module has transforms/opacity (x, y, opacity etc.) predefined properties listed below. Browsers can handle animation of that properties easily, so ideally you should not use properties besides predefined set.
const html =newmojs.Html({
+ // HTMLElement to animate. {String, Object} [selector, HTMLElement]
+ el:null,
+ // ∆ :: translateX property. {String, Number, Object} [value, delta]
+ x:0,
+ // ∆ :: translateY property. {String, Number, Object} [value, delta]
+ y:0,
+ // ∆ :: translateZ property. {String, Number, Object} [value, delta]
+ z:0,
+ // ∆ :: skewX property. {String, Number, Object} [value, delta]
+ skewX:0,
+ // ∆ :: skewY property. {String, Number, Object} [value, delta]
+ skewY:0,
+ // ∆ :: rotateX property. {String, Number, Object} [value, delta]
+ rotateX:0,
+ // ∆ :: rotateY property. {String, Number, Object} [value, delta]
+ rotateY:0,
+ // ∆ :: rotateZ property. {String, Number, Object} [value, delta]
+ rotateZ:0,
+ // ∆ :: scale property. {String, Number, Object} [value, delta]
+ scale:1,
+ // ∆ :: scaleX property. {String, Number, Object} [value, delta]
+ scaleX:1,
+ // ∆ :: scaleY property. {String, Number, Object} [value, delta]
+ scaleY:1,
+ // ∆ :: opacity property. {String, Number, Object} [value, delta]
+ opacity:1,
+
+ /*
+ For other CSS properties please see `Other CSS properties` section.
+ */
+
+ // Custom properties to alter mojs behaviour (see `Teach mojs with customProperties` section). {Object}
+ customProperties:null,
+ // If should be shown before animation starts. {Boolean}
+ isShowStart:true,
+ // If should stay shown after animation ends. {Boolean}
+ isShowEnd:true,
+ // If should trigger composite layer for the module. {Boolean}
+ isForce3d:false,
+ // If should hide module with `transforms` instead of `display`. {Boolean}
+ isSoftHide:true,
+ // If refresh state on subsequent plays. {Boolean}
+ isRefreshState:true,
+ // Context callbacks will be called with. {Object}
+ callbacksContext:this
+
+ /* TWEEN PROPERTIES */
+ // Duration {Number}
+ duration:350,
+ // Delay {Number}
+ delay:0,
+ // If should repeat after animation finished {Number} *(1)
+ repeat:0,
+ // Speed of the tween {Number}[0..∞]
+ speed:1,
+ // If the progress should be flipped on repeat animation end {Boolean}
+ isYoyo:false,
+ // Easing function {String, Function}[ easing name, path coordinates, bezier string, easing function ]
+ easing:'sin.out',
+ // Easing function for backward direction of the tween animation (fallbacks to `easing`) {String, Function}[ easing name, path coordinates, bezier string, easing function ]
+ backwardEasing:null,
+ // properties fro entire timeline
+ timeline:{
+ /* (+) TIMELINE PROPERTIES AND CALLBACKS - see Tween API */
+ },
+
+ /* TWEEN CALLBACKS */
+ /*
+ Fires on every update of the tween in any period (including delay periods). You probably want to use `onUpdate` method instead.
+ @param p {Number} Normal (not eased) progress.
+ @param isForward {Boolean} Direction of the progress.
+ @param isYoyo {Boolean} If in `yoyo` period.
+ */
+ onProgress(p, isForward, isYoyo){},
+ /*
+ Fires when tween's the entire progress reaches `0` point(doesn't fire in repeat periods).
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onStart(isForward, isYoyo){},
+ /*
+ Fires when tween's the progress reaches `0` point in normal or repeat period.
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onFirstUpdate(isForward, isYoyo){},
+ /*
+ Fires on first update of the tween in sufficiently active period (excluding delay periods).
+ @param ep {Number} Eased progress.
+ @param p {Number} Normal (not eased) progress.
+ @param isForward {Boolean} Direction of the progress.
+ @param isYoyo {Boolean} If in `yoyo` period.
+ */
+ onUpdate(ep, p, isForward, isYoyo){},
+ /*
+ Fires when tween's the progress reaches `1` point in normal or repeat period.
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onRepeatComplete(isForward, isYoyo){},
+ /*
+ Fires when tween's the entire progress reaches `1` point(doesn't fire in repeat periods).
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onComplete(isForward, isYoyo){},
+ /* Fires when the `.play` method called and tween isn't in play state yet. */
+ onPlaybackStart(){},
+ /* Fires when the `.pause` method called and tween isn't in pause state yet. */
+ onPlaybackPause(){},
+ /* Fires when the `.stop` method called and tween isn't in stop state yet. */
+ onPlaybackStop(){},
+ /* Fires when the tween end's animation (regardless progress) */
+ onPlaybackComplete(){},
+
+})
+ /*
+ Creates next state transition chain.
+ @param options {Object} Next shape state.
+ */
+ .then({/* next state options */})
+
+ /*
+ Starts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .play( shift =0)
+ /*
+ Starts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .playBackward( shift =0)
+ /*
+ Resumes playback in direction it was prior to `pause`.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .resume( shift =0)
+ /*
+ Pauses playback.
+ */
+ .pause()
+ /*
+ Stops playback.
+ @param {Number} Progress to set after the stop [0...1].
+ */
+ .stop( progress =0)
+ /*
+ Restarts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .replay( shift =0)
+ /*
+ Restarts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .replayBackward( shift =0)
+ /*
+ Sets progress of the tween.
+ @param progress {Number} Progress to set [ 0..1 ].
+ */
+ .setProgress( progress )
+ /*
+ Sets speed of the tween.
+ @param speed {Number} Progress to set [ 0..∞ ].
+ */
+ .setSpeed( speed )
+
+ /* Stops and resets the tween. */
+ .reset( speed )
+
+
list of custom properties names with their default value (originY: 50, anotherCustomProp: 0).
draw function that will be responsible for rendering that custom properties. It will be called on each animation frame and will be provided with el and props object that contain current states for all custom properties (props.originY, props.anotherCustomProp). Feel free to apply that state to the el any way that works for you.
All custom properties are expected to be plain numbers, you can define units in the draw function.
Property Map array was designed to express sequential values. Often used with Burst and Stagger modules to generate values that repeat over children length. Basically it is just an array that maps its values to children based on child index with mod function. So if you have property map with 3 values and 5 children, then 4th and 5th items will recieve 0th and 1st values from the map respecively. Works with any values inside the array.
You can provide a null value if you wanna use the default value.
Stagger string was designed to express continious numeric values. Often used with Burst and Stagger modules to generate a value on children with some step.
Takes 2 parameters:
start - start value for all children.
step - step of addition. It gets multiplied by child index and added to the start.
Timeline inherits all properties, callbacks and public methods from Tween, the only difference between Tween and Timeline is that the later doesn't have the duration property - it gets calculated from durations/delays of children. Also Timeline add two public methods that can recieve children. Please check the Tween API for reference.
Full API reference:
const timeline =newmojs.Timeline({
+
+ /* PROPERTIES */
+
+ /* (+) TWEEN PROPERTIES AND CALLBACKS - see Tween API */
+
+ /*
+ Note: The timeline inherits all tween properties, callbacks and public methods excluding `duration` property. The `duration` property is computed automatically regarding children tweens and timelines.
+ */
+ duration:null
+
+})
+
+ /* PUBLIC METHODS */
+
+ /*
+ Adds children tweens/timelines to the timeline.
+ @param children {Object, Array} Tweens/Timelines or array of such.
+ */
+ .add(tween){}
+ /*
+ Appends children tweens/timelines to the timeline after the current children.
+ @param children {Object, Array} Tweens/Timelines or array of such.
+ */
+ .append(tween){}
+
+ /* (+) TWEEN PUBLIC METHODS - see Tween API */
+
+
const tween =newmojs.Tween({
+
+ /* PROPERTIES */
+
+ // Duration {Number}
+ duration:350,
+ // Delay {Number}
+ delay:0,
+ // If should repeat after animation finished {Number} *(1)
+ repeat:0,
+ // Speed of the tween {Number}[0..∞]
+ speed:1,
+ // If the progress should be flipped on repeat animation end {Boolean}
+ isYoyo:false,
+ // Easing function {String, Function}[ easing name, path coordinates, bezier string, easing function ]
+ easing:'sin.out',
+ // Easing function for backward direction of the tween animation (fallbacks to `easing`) {String, Function}[ easing name, path coordinates, bezier string, easing function ]
+ backwardEasing:null,
+
+ /* CALLBACKS (in order of firing) */
+
+ /*
+ Fires on every when progress needs an update. For instance when tween was finished an remains in `1` progress state, and you will play it again - it will stay in the `1` state until first sufficient update after delay. So the `onRefresh` callback serves you to `refresh` the `1` state with `0` update.
+
+ @param isBefore {Boolean} If `true` - the refresh is before start time.
+ */
+ onRefresh(p, isForward, isYoyo){},
+
+ /*
+ Fires on every update of the tween in any period (including delay periods). You probably want to use `onUpdate` method instead.
+ @param p {Number} Normal (not eased) progress.
+ @param isForward {Boolean} Direction of the progress.
+ @param isYoyo {Boolean} If in `yoyo` period.
+ */
+ onProgress(p, isForward, isYoyo){},
+ /*
+ Fires when tween's the entire progress reaches `0` point(doesn't fire in repeat periods).
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onStart(isForward, isYoyo){},
+ /*
+ Fires when tween's the progress reaches `0` point in normal or repeat period.
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onFirstUpdate(isForward, isYoyo){},
+ /*
+ Fires on first update of the tween in sufficiently active period (excluding delay periods).
+ @param ep {Number} Eased progress.
+ @param p {Number} Normal (not eased) progress.
+ @param isForward {Boolean} Direction of the progress.
+ @param isYoyo {Boolean} If in `yoyo` period.
+ */
+ onUpdate(ep, p, isForward, isYoyo){},
+ /*
+ Fires when tween's the progress reaches `1` point in normal or repeat period.
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onRepeatComplete(isForward, isYoyo){},
+ /*
+ Fires when tween's the entire progress reaches `1` point(doesn't fire in repeat periods).
+ @param isForward {Boolean} If progress moves in forward direction.
+ @param isYoyo {Boolean} If progress inside `yoyo` flip period.
+ */
+ onComplete(isForward, isYoyo){},
+ /* Fires when the `.play` method called and tween isn't in play state yet. */
+ onPlaybackStart(){},
+ /* Fires when the `.pause` method called and tween isn't in pause state yet. */
+ onPlaybackPause(){},
+ /* Fires when the `.stop` method called and tween isn't in stop state yet. */
+ onPlaybackStop(){},
+ /* Fires when the tween end's animation (regardless progress) */
+ onPlaybackComplete(){},
+})
+ /* PUBLIC METHODS */
+
+ /*
+ Starts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .play( shift =0)
+ /*
+ Starts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .playBackward( shift =0)
+
+ /*
+ Stops playback.
+ @param progress {Number} Progress to set after stop [0..1]. *Default* is `0`.
+ */
+ .stop( progress =0)
+ /*
+ Pauses playback.
+ */
+ .pause()
+ /*
+ Restarts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .replay( shift =0)
+ /*
+ Restarts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .replayBackward( shift =0)
+ /*
+ Resumes playback in direction it was prior to `pause`.
+ @param shift {Number} Start progress shift in milliseconds.
+ */
+ .resume( shift =0)
+ /*
+ Sets progress of the tween.
+ @param progress {Number} Progress to set [ 0..1 ].
+ */
+ .setProgress( progress )
+ /*
+ Sets speed of the tween.
+ @param speed {Number} Progress to set [ 0..∞ ].
+ */
+ .setSpeed( speed )
+
+ /* Stops and resets the tween state. */
+ .reset()
+
+
stagger is a function not constructor! that wraps ANY module to create staggered animations. You can treat stagger function as a prism is mounted on top of modules and splits input properties evenly between them:
// wrap shape in stagger
+const Shapes = mojs.stagger( mojs.Shape );
+// now you can have staggered syntax on the shape and create multiple shapes at once. the next code will produce 5 shapes
+const shapes =newShapes({
+ // quantifier defines number of modules to create
+ quantifier:5,
+ // each module will have the same scale transition
+ scale:{1:0}
+});
+
+
You can use array to specify property value for each shape:
// wrap shape in stagger
+const StaggeredShape = mojs.stagger( mojs.Shape );
+// now you can have staggered syntax on the shape and create multiple shapes at once. the next code will produce 5 shapes
+const shapes =newStaggeredShape({
+ // quantifier defines number of modules to create
+ quantifier:5,
+ // each module will receive value from this array. if array is smaller than amount of modules (4 vs 5), the stagger prism will loop on the array, thus `5th` item will receive value by `index = 0`, `6th` item will receive value by `index = 1` and so on. This is called `property map` because it maps properties array to modules inside stagger.
+ scale:[{0:1},{0:1.25},{0:1.5},{0:2}],
+});
+
+
You can use stagger string incremental properties:
// wrap shape in stagger
+const StaggeredShape = mojs.stagger( mojs.Shape );
+// now you can have staggered syntax on the shape and create multiple shapes at once. the next code will produce 5 shapes
+const shapes =newStaggeredShape({
+ // quantifier defines number of modules to create
+ quantifier:5,
+ // the value of the property will be increased for each module with specified `step`(.25), starting from the `initial value`(1). Step could be `positive` or `negative`.
+ scale:'stagger(1, .25)'
+});
+
+
The initial value could be omitted - it will fallback to 0:
// wrap shape in stagger
+const Shapes = mojs.stagger( mojs.Shape );
+// now you can have staggered syntax on the shape and create multiple shapes at once. the next code will produce 5 shapes
+const shapes =newShapes({
+ // quantifier defines number of modules to create
+ quantifier:5,
+ // this means stagger with step of `50` starting from `0`
+ x:'stagger(50)'
+});
+
+
stagger strings can be used inside deltas and can contain rand expressions:
// wrap shape in stagger
+const StaggeredShape = mojs.stagger( mojs.Shape );
+// now you can have staggered syntax on the shape and create multiple shapes at once. the next code will produce 5 shapes
+const shapes =newStaggeredShape({
+ // quantifier defines number of modules to create
+ quantifier:5,
+ // animate scale from `0` to staggered value (`1` for 1st module, `1.25` for 2nd, `1.5` for 3rd etc.)
+ scale:{0:'stagger(1, .25)'},
+ // random value in range from `0` to staggered value (`200` for 1st module, `400` for 2nd, `600` for 3rd etc.)
+ x:'stagger(-300, rand(100, 200))'
+});
+
+
const shape =newmojs.Shape({
+ // how many modules to create. {Number, String} [amount of modules, property name]
+ // if `string` is set instead of `number` it is treated as `property name` pointer - the number of modules will be inferred on value of that property, for instance if `quantifier` is set to `el` and `el` property has `array like` as it's value - quantifier will be set to length of that array.
+ quantifier:'el',
+ // options for timeline that controls all modules
+ timeline:{},
+ /*
+ Module's properties and callbacks, depends on what module has been wrapped into stagger, please see wrapped module API reference.
+ */
+})
+/*
+ Creates next state transition chain.
+ @param options {Object} Next shape state.
+*/
+.then({/* next state options */})
+
+/*
+ Tunes start state with new options.
+ @param options {Object} New start properties.
+*/
+.tune({/* new start properties */})
+
+/*
+ Regenerates all randoms in initial properties.
+*/
+.generate()
+/*
+ Starts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+*/
+.play( shift =0)
+/*
+ Starts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+*/
+.playBackward( shift =0)
+/*
+ Pauses playback.
+*/
+.pause()
+/*
+ Restarts playback.
+ @param shift {Number} Start progress shift in milliseconds.
+*/
+.replay( shift =0)
+/*
+ Restarts playback in backward direction.
+ @param shift {Number} Start progress shift in milliseconds.
+*/
+.replayBackward( shift =0)
+/*
+ Resumes playback in direction it was prior to `pause`.
+ @param shift {Number} Start progress shift in milliseconds.
+*/
+.resume( shift =0)
+/*
+ Sets progress of the tween.
+ @param progress {Number} Progress to set [ 0..1 ].
+*/
+.setProgress( progress )
+/*
+ Sets speed of the tween.
+ @param speed {Number} Progress to set [ 0..∞ ].
+*/
+setSpeed( speed )
+/* Stops and resets the tween. */
+reset( speed );
+
- There is another demo that can set some light on the shape usage in motion
- graphics, it was made with bunch of shapes and few characters that compose
- a {{ letter1 }}{{ letter2 }}{{ letter3 }}{{ letter4 }} word
- together:
-
This easing curve makes the circle bounce when animating the y value. Click on the points to edit them, or click on the curve in between to add new points. See shortcuts below.
-
-
-
-
-
-
-
-
-
diff --git a/docs/.vuepress/components/MojsInteractive.vue b/docs/.vuepress/components/MojsInteractive.vue
deleted file mode 100644
index 90bb3674..00000000
--- a/docs/.vuepress/components/MojsInteractive.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-/**
-Usage:
-
-
-With autoplay on the timeline:
-
-
-or if you wanna declare a height:
-
-
-
-or with no controlls (will have no animation, unless you provide a .play() function yourself):
-
-
-
-If you want to show (and use) the declaration of the animation like this:
-
-const bouncyCircle = new mojs.Shape({
- ...
-});
-
-bouncyCircle.play()
-
-Then you may wanna use the global mode.
-The string passed in the global prop should equal the variable you declared.
-Note that it will be global, so make sure it's unique, and use it carefully:
-
-
-
-
-*/
-
-
-
-
-
-
-
-
-
-
-
{{ this.notice }}
-
-
-
-
-
-
-
-
-
diff --git a/docs/.vuepress/components/More.vue b/docs/.vuepress/components/More.vue
deleted file mode 100644
index 178d0c94..00000000
--- a/docs/.vuepress/components/More.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
-Usage:
-
- Content
-
-
-TODO: Add aria roles, or try make vue-badger-accordion work within vuepress
-*/
-
-
-
-
-The first thing that comes to mind when I see the default burst - is the famous [Twitter's fav animation](https://codepen.io/donovanh/pen/dYqxNb). Animations like that are usually called **micro animations** but I've used to call them **micro celebrations** because of their festivity.
-
-
-
-Anyways, sequences like that are a cinch when you have the burst module in your hands. Here's how to do the main part of the sequence (click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/cb910fce2e9ed27f902ae7f895bbb9ac)
-
-
-Here above, we have declared a burst with 5 particles (which is by default) with a burst's radius transition from 4 to 19. There are 2 strategies for bursts like that - one is to scale children down (by default), the second one is to animate `strokeDashoffset` on children which we have used here.
-
-
-
-The next step is to add two more shapes to the scene - one circle with `strokeWidth` animation and a custom one - the star with `elastic.out` transition for the `scale`(click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/080045a3420abd5344443aff91c85fa2)
-
-
-I love using the burst module over sprites because it turns out to be a way flexible over pre-rendered sequence of images, - you can play with easings, time, delay, colors etc. Also, you can even change shapes with no effort at all - for instance, if you want to add stars instead of lines (click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/0fd14523d76f93865539f1f011682da9)
-
-
-Ok, let's redo the later Twitter love animation too. There is the burst part of the sequence(click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/28b429cd2d5ae8c0dd0f10cecd6d0bd0)
-
-
-The catch here is to use the `in` easing for `scale` property and the opposite `out` easing for particles position. Also, we have set the `pathScale` slightly smaller for "inner" particles. After that, we have defined a small `degreeShift` for each odd / inner particle. Then `null` value in the [properyMaps](/api/syntax/property-maps) mean that it takes the default value. For scale it's `1` and in `degreeShift` it's `0`.
-
-
-
-The next step is to add the circle shape and heart animations, almost identical to ones we have used in the Twitter fav scene (click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/e3751855536c67dc6f57f9e74e5e347d)
-
-
-And the last touch is to add all the color deltas, there are quite some of them (click anywhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/f25a2fbaf15c43c0923f507d54951cdb)
-
-
-That's basically the same micro confirmations that I've given you in the [Shape & ShapeSwirl](/tutorials/shape/) tutorial **(×)**:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/3c49de2d7d0ca3e92bf5db5bf7a2687d)
-
-
-In the example above we didn't use the `Burst` module that much. But you can imagine that those effects are much easier with the `Burst` module. For instance the bubbles in the first part could be made like this:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/a336008aff2d73121763887097a99001)
-
-
-Here we have the static `radius` of `25` on burst and `3` `white` particles. We've set a slightly `rand`om `degreeShift` and a `delay` on the `children` that eventually gives us the bubble like motion.
-
-
-
-The second burst is super simple too:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/afbfb59f00d5dfb8b28fc97510fcc167)
-
-
-As you can see, the second burst is almost the default one, we have only changed the main `radius` to `0 : 30`. As for children, we tweaked the `shape` to a `line` value, and made the `scaleX` to fade out from `1` to `0`.
-
-
-
-The final touch is to add center `circle` and `cross` shapes:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/d260dc9246f2100b9f2dbe79a01d01f6)
-
-
-The second part - the bubble fadeout effect is even simpler. For the `Burst` module, we just need to set `degree` to `0` so the particles will flow in one direction, then set `isSwirl` to `true` (Burst composes ShapeSwirls, remember?) on `children` thus particles will follow sine path. After that we need to slightly randomize `swirlSize`, `swirlFrequency` and `pathScale` parameters (click somewhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/60d5d3c97981022f20f86c37580bceb1)
-
-
-Just like with the previous example, the last touch is to add `circle` and `cross` transitions (click somewhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/f307bc95b1ac02c09042c89ea7afe945)
-
-### Motion for the web
-
-
-Let's recall the old "motion for the web" demo **(×)**:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/ogOYJj)
-
-
- Note that the demo was made a while ago so it contains deprecated syntax.
-
-
-
-How many burst modules have you noticed in this demo? There are quite some actually. I think the most noticeable are collisions with the ground (click to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/4fe37a79f6d665d749ebcb4f22c2ee4e)
-
-
-This one was made by virtue of `degree: 180`, childrens' `radius` of `7` and `strokeDashoffset` animation on particles.
-
-
-
-There is another burst in that demo:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/953926af8c30d3dd297070b1a079e059)
-
-
-This one is simple too, the good one to practice basics.
-
-
-
-Did you notice those meteors on the left of the letters? Those are `Burst` too. How? Well first you have a burst with 3 children:
-
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/1018219ace50f564f7bb8b77b53efeb8)
-
-
-Then you set `degree` of `0` so they all will fly to the same direction:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/d84370a3c19fdcea8c714e7049c9ab5d)
-
-
-Hm, they kind of overlap, so let's shift them by staggering `left` and `top` properties on children, after that let's add some `delay` with help of property map:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/2be25259bdd8e01f9ac3770f6f2bd36a)
-
-
-Do you see that? Almost there. The last touch is to rotate the main swirl:
-
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/bf8377efd5b0dada9537481e29ecd6af)
-
-
-Pretty yummy detail.
-
-
-
-What else have we got in the demo? Letters! That's how O letter was made:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/432464f276fe6f06b457915ca6062723)
-
-
-As you can see, we've set the main swirl's `radius` and `degree` to `0` to put the child shapes in the one spot. Then we just have to slightly stagger `delay` on children.
-
-
-
-The same technique for the other parts - vertical and horizontal lines:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/33f7924ecd146d951698bf190ac7838e)
-
-
-Good. Let's refactor it a bit and make the vertical line start from the bottom, like firework launch:
-
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/a3c64825683dddd18316f8f288475131)
-
-
-That's better.
-
-
-
Blast all the things up
-
-
-Let's move on. What else we can do with `Burst`? We can blast things up. I love blasting things up, do you? Recall this demo from the [Shape & ShapeSwirl](/tutorials/shape/) tutorial(×):
-
-
-
-[Link to pen](https://codepen.io/sandstedt/pen/RzqpRz)
-
-
-Do you see that blast at the start? Let's make it together. First, you can notice these small particles (click somewhere to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/79db23782ec1eb9d16246b136ec82b9c)
-
-
-Notice how we use `pathScale` and `degreeShift` properties to add randomness to the blast. The `pathScale` property defines how the length of the particle's path scales. The `degreeShift` property defines how much the particle will shift in its radial position in burst circle shape. So if a particle has `degreeShift` of `90`, it will be shifted in radial shape by 90 degrees. Since `pathScale` and `degreeShift` both have random values and we `generate` the module on each user click - we always have the random blast pattern.
-
-
-
-Let's add more details to the blast, for instance, another burst with large geometric shapes:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/3b9c757a7625dc015753740bcad8fb66)
-
-
-Feels rather messy. But it's fine for now, it should get straight when we will add more shapes:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/4c8366d3a7eea2a5f83a3d457f8e9cd9)
-
-
-And the last touch is to add "one spot" large burst of 3 items - one red, one white and one black:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/699cfc8716a13e0e1c15105af2b6fb95)
-
-
-Yum. I hope you love to blast things up too now. Notice we did it without a single repaint!
-
-
-
Modal blast
-
-
-If you recall the next old demo, you probably can say now how it was made. How many modules does this blast compose (click close to see the effect) **(×)**?
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/XJjLxe)
-
-
-The answer is 3 - `2 Bursts` and `1 subtle circle` in the middle.
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/6caf96461207a5caa9226fbd2631569d)
-
-
-The effect is a bit more modest than the previous one. As you can see, I haven't recreated exactly the same sequence here, but rather made a slightly different one.
-
-
-
The sleepy mole
-
-
-OK. Enough distraction. Let's create something less straightforward. Recall this demo with the mole **(×)**:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/477056cb1ffe88c4bfbf8a3005d99496)
-
-
-Can you count how much effects are bursts here? There are quite a few. The most noticeable is the effect that appears after the door shuts down - the 4 spots of dust. This one was composed with 4 bursts (one for each corner), let's start with just one for now:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/97a95a5cb7663cf336e8d80f9f511553)
-
-
-How is it possible? Remember that the `Burst` composes `ShapeSwirls`, not simple `Shape`s so, if we set `isSwirl` to `true`, we will have sine paths. This is how you do 4 at once (click to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/bbc4c52b7145d9d872ac437f21afd75f)
-
-
- You can do the same `4 dust points effect` with just one declarative call if will use `Stagger` module, but that's a topic for the next tutorial.
-
-
-
-OK. Recalling the mole demo, what else did you notice? Probably confetti that appears when cube hits the floor. Right!
-
-
-
-That's how you do the first large one:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/421a16733643447bb4770424cf72563d)
-
-
-The main catch here is to mimic the air flow by rotating the main swirl backward slightly. Then you have to create more bursts, each one is smaller than previous one and each of them should have a smaller delay.
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/d0d0c2b1e98f1a0f8d6ea250c31ed081)
-
-
-What else have you noticed in the mole demo? Yep saliva that comes from the mole mouth when it teases. First, you want to make `0-degree` burst, and rotate the main swirl downward, imitating that the air current which comes out of his mouth gets weaker:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/828d4f1e1f6fdfd608b588af0b9bdd45)
-
-
-Then add larger burst's `radius`, turn on swirl sine paths and randomize them with `pathScale` property:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/8b3f0eb920226a7c2d703e601af38fcf)
-
-
-At last, add random `radius` to children and mix `direction` of the swirls:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/b1e36259bfa2d6023402eef7de77cc8d)
-
-
-You can see that the `Burst` module is pretty flexible thus helps you to craft numerous sophisticated effects.
-
-
-
The dust trail
-
-
-OK, let's recall another demo, remember this one from previous the tutorial? Did I notice that the dust trail effect is much easier with burst **(×)**?
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/633e6aa52d40691cca2f2cda91650bae)
-
-
-As you remember, to create the dust trail effect, we first need to shoot the child swirls downwards to the ground with random children radiuses:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/c59d4e046a6c78f3ac9d3a5699018fa8)
-
-
-Now instead of multiple swirl modules which we have been using in the previous tutorial, we use just one burst - `stagger` expressions turn out to be useful! After that you want to create an `overflow: hidden` container and assign it as `parent` to the burst:
-
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/e48eb4e56ce1fa94c515b4fda6513d24)
-
-
-This time, we have used the `Shape` module as `parent` overflow constrain.
-
-
-
- The last touch is to add the fading burst at the end and make the `parent` move to the left:
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/10cc620075141688d0cf8eca7a561062)
-
-
-That's exact the same effect as we have made in the [Shape & ShapeSwirl](/tutorials/shape/) tutorial, but this time with just 2 `Bursts`! `Bursts` are fun, there is a little demo I've made with this dust trail effect (click to see):
-
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/03e9d8f2fbf886aa1505c61c81d782a0)
-
-
-That's it for `Burst`. We've touched only the surface of the possible effects that you can compose with this module, but that's a good start to convey the idea and APIs. Also, my friends from [Codrops](http://tympanus.net/codrops/) wrote an awesome [post](http://tympanus.net/Development/Animocons/) a while ago on the `Burst` matter, definitely check it out.
-
-
-## Recap
-
-
-Burst is the module that helps you to craft sophisticated motion effects with simple declarative calls. Technically, it is the main `ShapeSwirl` that composes a bunch of child `ShapeSwirls` forming the radial shape by default. `mojs` takes care about all markup bootstrapping and positioning of the module for you. The main swirl has no shape thus no presentation properties. The duration of the main swirl is calculated regarding duration of the child swirls. To control child swirls, pass the `ShapeSwirl` properties to the `children` property of the main swirl. You can find exhaustive API reference at [Burst API](/api/burst) section.
-
-
-
-Burst is indeed an interesting module but, please don't overuse it. Your intention should be to guide and cheer users but not overwhelm them. Be cautious and think twice, if you feel that anyhow the effect you've done makes a visual noize rather than helps to solve a real problem, skip it entirely.
-
-
-
-## Thank you!
-
-
-I'm happy you've made it here! It was a long and intense journey, I hope you don't feel overwhelmed. I also humbly hope that these effect modules will come handy to you on your web development route. There are some more "effects" modules that will land to the mojs shortly so stay tuned. For any questions, catch me on Twitter [@legomushroom](https://twitter.com/legomushroom), ask a question on StackOverflow with `#mojs` tag, rise an issue on the [GitHub repo](https://github.com/mojs/). You can help the project on [GitHub](https://github.com/mojs/). {'Love <3.'}
-
-
-
-Kudos to [Jonas Sandstedt](https://twitter.com/jonassandstedt) for his help in read proofing this tutorial!
diff --git a/docs/tutorials/burst/demos_for_backup.md b/docs/tutorials/burst/demos_for_backup.md
deleted file mode 100644
index 1fd2b48b..00000000
--- a/docs/tutorials/burst/demos_for_backup.md
+++ /dev/null
@@ -1,1467 +0,0 @@
-In case the codepens in the tutorial disapears, here is a backup of all of them
-
-# https://codepen.io/sol0mka/pen/cb910fce2e9ed27f902ae7f895bbb9ac
-
-```css
-body, html {
- padding: 0;
-}
-body {
- //background: #202223;
-}
-```
-
-```js
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 4: 19 },
- rotate: 45,
- children: {
- shape: 'line',
- radius: 3,
- scale: 1,
- stroke: '#FD7932',
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- duration: 700,
- easing: 'quad.out',
- }
-});
-
-document.addEventListener( 'click', function (e) {
- burst
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-# https://codepen.io/sol0mka/pen/080045a3420abd5344443aff91c85fa2
-```
-const RADIUS = 28;
-const circle = new mojs.Shape({
- left: 0, top: 0,
- stroke: '#FF9C00',
- strokeWidth: { [2*RADIUS] : 0 },
- fill: 'none',
- scale: { 0: 1, easing: 'quad.out' },
- radius: RADIUS,
- duration: 450
-});
-
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 6: RADIUS - 7 },
- rotate: 45,
- children: {
- shape: 'line',
- radius: RADIUS/7.3,
- scale: 1,
- stroke: '#FD7932',
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- degreeShift: 'stagger(0,-5)',
- duration: 700,
- delay: 200,
- easing: 'quad.out',
- }
-});
-
-class Star extends mojs.CustomShape {
- getShape () {
- return '';
- }
-}
-mojs.addShape( 'star', Star );
-
-const star = new mojs.Shape({
- left: 0, top: 0,
- shape: 'star',
- fill: '#FF9C00',
- scale: { 0 : 1 },
- easing: 'elastic.out',
- duration: 1600,
- delay: 300,
- radius: RADIUS/2.25
-});
-
-const timeline = new mojs.Timeline({ speed: 1.5 });
-
-timeline
- .add( burst, circle, star );
-
-document.addEventListener( 'click', function (e) {
- const coords = { x: e.pageX, y: e.pageY };
- burst.tune(coords);
- circle.tune(coords);
- star.tune(coords);
- timeline.replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/0fd14523d76f93865539f1f011682da9
-
-```js
-class Star extends mojs.CustomShape {
- getShape () {
- return '';
- }
-}
-mojs.addShape( 'star', Star );
-
-const RADIUS = 28;
-const circle = new mojs.Shape({
- left: 0, top: 0,
- stroke: '#FF9C00',
- strokeWidth: { [2*RADIUS] : 0 },
- fill: 'none',
- scale: { 0: 1, easing: 'quad.out' },
- radius: RADIUS,
- duration: 450,
-});
-
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 6: RADIUS - 3 },
- rotate: 45,
- children: {
- shape: 'star',
- radius: RADIUS/2.2,
- fill: '#FD7932',
- degreeShift: 'stagger(0,-5)',
- duration: 700,
- delay: 200,
- easing: 'quad.out',
- // delay: 100,
- }
-});
-
-const star = new mojs.Shape({
- left: 0, top: 0,
- shape: 'star',
- fill: '#FF9C00',
- scale: { 0 : 1 },
- easing: 'elastic.out',
- duration: 1600,
- delay: 300,
- radius: RADIUS/2.35
-});
-
-const timeline = new mojs.Timeline({ speed: 1.5 });
-
-timeline
- .add( burst, circle, star );
-
-document.addEventListener( 'click', function (e) {
- const coords = { x: e.pageX, y: e.pageY };
- burst.tune(coords);
- circle.tune(coords);
- star.tune(coords);
- timeline.replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/28b429cd2d5ae8c0dd0f10cecd6d0bd0
-
-```js
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 4: 32 },
- rotate: 45,
- count: 14,
- children: {
- radius: 2.5,
- fill: '#FD7932',
- scale: { 1: 0, easing: 'quad.in' },
- pathScale: [ .8, null ],
- degreeShift: [ 13, null ],
- duration: [ 500, 700 ],
- easing: 'quint.out'
- }
-});
-
-document.addEventListener( 'click', function (e) {
- const coords = { x: e.pageX, y: e.pageY };
- burst
- .tune(coords)
- .replay();
-});
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/28b429cd2d5ae8c0dd0f10cecd6d0bd0
-
-```js
-class Heart extends mojs.CustomShape {
- getShape () {
- return '';
- }
-}
-mojs.addShape( 'heart', Heart );
-
-const CIRCLE_RADIUS = 20;
-const RADIUS = 32;
-const circle = new mojs.Shape({
- left: 0, top: 0,
- stroke: '#FF9C00',
- strokeWidth: { [2*CIRCLE_RADIUS] : 0 },
- fill: 'none',
- scale: { 0: 1 },
- radius: CIRCLE_RADIUS,
- duration: 400,
- easing: 'cubic.out'
-});
-
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 4: RADIUS },
- rotate: 45,
- count: 14,
- timeline: { delay: 300 },
- children: {
- radius: 2.5,
- fill: '#FD7932',
- scale: { 1: 0, easing: 'quad.in' },
- pathScale: [ .8, null ],
- degreeShift: [ 13, null ],
- duration: [ 500, 700 ],
- easing: 'quint.out'
- }
-});
-
-const heart = new mojs.Shape({
- left: 0, top: 2,
- shape: 'heart',
- fill: '#E5214A',
- scale: { 0 : 1 },
- easing: 'elastic.out',
- duration: 1600,
- delay: 300,
- radius: 11
-});
-
-document.addEventListener( 'click', function (e) {
- const coords = { x: e.pageX, y: e.pageY };
- burst
- .tune(coords)
- .replay();
-
- circle
- .tune( coords )
- .replay();
-
- heart
- .tune( coords )
- .replay();
-
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/f25a2fbaf15c43c0923f507d54951cdb
-
-```js
-class Heart extends mojs.CustomShape {
- getShape () {
- return '';
- }
-}
-mojs.addShape( 'heart', Heart );
-
-const CIRCLE_RADIUS = 20;
-const RADIUS = 32;
-const circle = new mojs.Shape({
- left: 0, top: 0,
- stroke: { '#E5214A' : '#CC8EF5' },
- strokeWidth: { [2*CIRCLE_RADIUS] : 0 },
- fill: 'none',
- scale: { 0: 1 },
- radius: CIRCLE_RADIUS,
- duration: 400,
- easing: 'cubic.out'
-});
-
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 4: RADIUS },
- rotate: 45,
- count: 14,
- timeline: { delay: 300 },
- children: {
- radius: 2.5,
- fill: [
- // { '#91D2FA' : '#BDEFD8' },
- // { '#91D2FA' : '#ADD6CA' },
- { '#9EC9F5' : '#9ED8C6' },
- { '#91D3F7' : '#9AE4CF' },
-
- { '#DC93CF' : '#E3D36B' },
- { '#CF8EEF' : '#CBEB98' },
-
- { '#87E9C6' : '#1FCC93' },
- { '#A7ECD0' : '#9AE4CF' },
-
- { '#87E9C6' : '#A635D9' },
- { '#D58EB3' : '#E0B6F5' },
-
- { '#F48BA2' : '#CF8EEF' },
- { '#91D3F7' : '#A635D9' },
-
- { '#CF8EEF' : '#CBEB98' },
- { '#87E9C6' : '#A635D9' },
- ],
- scale: { 1: 0, easing: 'quad.in' },
- pathScale: [ .8, null ],
- degreeShift: [ 13, null ],
- duration: [ 500, 700 ],
- easing: 'quint.out',
- // speed: .1
- }
-});
-
-const heart = new mojs.Shape({
- left: 0, top: 2,
- shape: 'heart',
- fill: '#E5214A',
- scale: { 0 : 1 },
- easing: 'elastic.out',
- duration: 1000,
- delay: 300,
- radius: 11
-});
-
-document.addEventListener( 'click', function (e) {
- const coords = { x: e.pageX, y: e.pageY };
- burst
- .tune(coords)
- .replay();
-
- circle
- .tune( coords )
- .replay();
-
- heart
- .tune( coords )
- .replay();
-
-});
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/a336008aff2d73121763887097a99001
-
-```js
-const bubbles = new mojs.Burst({
- left: 0, top: 0,
- radius: 25,
- count: 3,
- children: {
- stroke: 'white',
- fill: 'none',
- scale: 1,
- strokeWidth: { 8: 0 },
- radius: { 0 : 'rand(8, 12)' },
- degreeShift: 'rand(-50, 50)',
- duration: 400,
- delay: 'rand(0, 250)',
- }
-});
-
-document.addEventListener( 'click', function (e) {
- bubbles
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/d260dc9246f2100b9f2dbe79a01d01f6
-
-```js
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 0: 30 },
- rotate: 'rand(0, 360)',
- timeline: { delay: 50 },
- children: {
- shape: 'line',
- stroke: 'white',
- fill: 'none',
- scale: 1,
- scaleX: { 1: 0 },
- // easing: 'cubic.out',
- duration: 650
- }
-});
-
-const bubbles = new mojs.Burst({
- left: 0, top: 0,
- radius: 28,
- count: 3,
- timeline: { delay: 200 },
- children: {
- stroke: 'white',
- fill: 'none',
- scale: 1,
- strokeWidth: { 8: 0 },
- radius: { 0 : 'rand(6, 10)' },
- degreeShift: 'rand(-50, 50)',
- duration: 450,
- delay: 'rand(0, 250)',
- }
-});
-
-const cross = new mojs.Shape({
- left: 0, top: 0,
- shape: 'cross',
- rotate: 45,
- radius: 9,
- scale: { 0: 1 },
- stroke: 'white',
- duration: 400,
- delay: 150
-});
-
-const circle = new mojs.Shape({
- left: 0, top: 0,
- radius: { 0: 16, easing: 'sin.out' },
- fill: 'none',
- stroke: 'white',
- strokeWidth: { 10: 0 },
- duration: 450,
- easing: 'cubic.out'
-});
-
-document.addEventListener( 'click', function (e) {
- burst
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- bubbles
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- cross
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- circle
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/60d5d3c97981022f20f86c37580bceb1
-
-```js
-const DURATION = 400
-
-const smoke = new mojs.Burst({
- left: 0, top: 0,
- degree: 0,
- count: 3,
- radius: { 0: 100 },
- children: {
- fill: 'white',
- pathScale: 'rand(0.5, 1)',
- radius: 'rand(12, 15)',
- swirlSize: 'rand(10, 15)',
- swirlFrequency: 'rand(2, 4)',
- direction: [ 1, -1 ],
- duration: `rand(${1*DURATION}, ${2*DURATION})`,
- delay: 'rand(0, 75)',
- easing: 'quad.out',
- isSwirl: true,
- isForce3d: true,
- }
-});
-
-
-document.addEventListener( 'click', (e) => {
- smoke
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/f307bc95b1ac02c09042c89ea7afe945
-
-```js
-const DURATION = 400
-
-const bubbles = new mojs.Burst({
- left: 0, top: 0,
- degree: 0,
- count: 3,
- radius: { 0: 100 },
- children: {
- fill: 'white',
- pathScale: 'rand(0.5, 1)',
- radius: 'rand(12, 15)',
- swirlSize: 'rand(10, 15)',
- swirlFrequency: 'rand(2, 4)',
- direction: [ 1, -1 ],
- duration: `rand(${1*DURATION}, ${2*DURATION})`,
- delay: 'rand(0, 75)',
- easing: 'quad.out',
- isSwirl: true,
- isForce3d: true,
- }
-});
-
-const circle = new mojs.Shape({
- top: 0, left: 0,
- radius: { 20: 0 },
- stroke: 'white',
- strokeWidth: { 5: 0 },
- fill: 'none',
- duration: 500
- // delay: 200
-});
-
-const cross = new mojs.Shape({
- top: 0, left: 0,
- rotate: 45,
- shape: 'cross',
- radius: { 10: 0 },
- stroke: 'white',
- fill: 'none',
- easing: 'cubic.out',
- duration: 500
-});
-
-document.addEventListener( 'click', (e) => {
- bubbles
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
- circle
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- cross
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/4fe37a79f6d665d749ebcb4f22c2ee4e
-
-```js
-const burst = new mojs.Burst({
- left: 0, top: 0,
- degree: 180,
- rotate: 90,
- radius: { 10: 25 },
- count: 5,
- children: {
- shape: 'line',
- radius: 7,
- radiusY: 0,
- scale: 1,
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- stroke: '#F9DD5E' ,
- easing: 'linear.none',
- duration: 600
- }
-});
-
-document.addEventListener( 'click', function (e) {
- burst
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/953926af8c30d3dd297070b1a079e059
-
-```js
-const burst = new mojs.Burst({
- left: 0, top: 0,
- radius: { 10: 25 },
- count: 4,
- children: {
- shape: 'line',
- radius: 7,
- radiusY: 0,
- scale: 1,
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- stroke: '#FC2D79' ,
- easing: 'linear.none',
- duration: 600
- }
-});
-
-document.addEventListener( 'click', function (e) {
- burst
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/1018219ace50f564f7bb8b77b53efeb8
-
-```js
-
-
-const meteors = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: { 0: 250 },
-
- children: {
- shape: 'line',
- stroke: ['#F9DD5E', '#FC2D79', '#11CDC5'],
- duration: 400,
- radius: 60,
- strokeWidth: 8,
- isForce3d: true
- }
-});
-
-document.addEventListener( 'click', function (e) {
- meteors
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-
-```
-
-
-# https://codepen.io/sol0mka/pen/d84370a3c19fdcea8c714e7049c9ab5d
-
-```js
-const meteors = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: { 0: 250 },
- degree: 0,
-
- children: {
- shape: 'line',
- stroke: ['#F9DD5E', '#FC2D79', '#11CDC5'],
- duration: 400,
- radius: 60,
- strokeWidth: 8,
- isForce3d: true
- }
-});
-
-document.addEventListener( 'click', function (e) {
- meteors
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/2be25259bdd8e01f9ac3770f6f2bd36a
-
-```js
-const meteors = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: { 0: 250 },
- degree: 0,
-
- children: {
- shape: 'line',
- stroke: ['#F9DD5E', '#FC2D79', '#11CDC5'],
- duration: 400,
- radius: 60,
- strokeWidth: 8,
- left: 'stagger(20)',
- top: 'stagger(20)',
- delay: [ 0, 200, 100 ],
- isForce3d: true
- }
-});
-
-document.addEventListener( 'click', function (e) {
- meteors
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/bf8377efd5b0dada9537481e29ecd6af
-
-```js
-const meteors = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: { 0: 250 },
- degree: 0,
- rotate: 225,
-
- children: {
- shape: 'line',
- stroke: ['#F9DD5E', '#FC2D79', '#11CDC5'],
- duration: 400,
- radius: 60,
- strokeWidth: 8,
- left: 'stagger(20)',
- top: 'stagger(20)',
- delay: [ 0, 200, 100 ],
- isForce3d: true
- }
-});
-
-document.addEventListener( 'click', function (e) {
- meteors
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-} );
-
-// new MojsPlayer({ add: burst, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/432464f276fe6f06b457915ca6062723
-
-```js
-const o = new mojs.Burst({
- count: 3,
- radius: 0,
- degree: 0,
-
- children: {
- stroke: [ '#FC2D79', '#11CDC5', 'white'],
- fill: 'none',
- duration: 400,
- scale: 1,
- radius: 35,
- radiusY: { 0: 35 },
- strokeWidth: 3,
- duration: 800,
- delay: 'stagger(125)',
- }
-});
-
-const timeline = new mojs.Timeline;
-
-timeline
- .add( o );
-
-new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/33f7924ecd146d951698bf190ac7838e
-
-```js
-const vertLine = new mojs.Burst({
- count: 3,
- radius: 0,
- degree: 0,
-
- children: {
- shape: 'line',
- stroke: [ '#FC2D79', '#11CDC5', 'white'],
- duration: 400,
- scale: 1,
- radius: 35,
- radiusX: { 0: 35 },
- strokeWidth: 3,
- duration: 800,
- delay: 'stagger(125)',
- }
-});
-
-const horLine = new mojs.Burst({
- count: 3,
- radius: 0,
- degree: 0,
- rotate: 90,
- y: -50,
- x: 1,
-
- children: {
- shape: 'line',
- stroke: [ '#FC2D79', '#11CDC5', 'white'],
- duration: 400,
- scale: 1,
- radius: 20,
- radiusX: { 0: 20 },
- strokeWidth: 3,
- duration: 800,
- delay: 'stagger(800, 125)',
- }
-});
-
-
-const o = new mojs.Burst({
- count: 3,
- radius: 0,
- degree: 0,
-
- children: {
- stroke: [ '#FC2D79', '#11CDC5', 'white'],
- fill: 'none',
- duration: 400,
- scale: 1,
- radius: 35,
- radiusY: { 0: 35 },
- strokeWidth: 3,
- duration: 800,
- delay: 'stagger(600, 125)',
- }
-});
-
-const timeline = new mojs.Timeline;
-
-timeline
- .add( o, vertLine, horLine );
-
-new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/a3c64825683dddd18316f8f288475131
-
-```js
-const MAIN_OPTS = {
- count: 3,
- radius: 0,
- degree: 0
-}
-
-const CHILD_OPTS = {
- stroke: [ '#FC2D79', '#11CDC5', 'white'],
- fill: 'none',
- duration: 400,
- scale: 1,
- radius: 35,
- radiusY: { 0: 35 },
- strokeWidth: 3,
- duration: 800,
- delay: 'stagger(125)',
-}
-
-const vertLine = new mojs.Burst({
- ...MAIN_OPTS,
- x: -1,
-
- children: {
- ...CHILD_OPTS,
- shape: 'line',
- radius: 35,
- scaleX: { 0: 1 },
- left: -35,
- top: 35,
- origin: '100% 50%'
- }
-});
-
-const horLine = new mojs.Burst({
- ...MAIN_OPTS,
- rotate: 90,
- y: -50,
-
- children: {
- ...CHILD_OPTS,
- shape: 'line',
- radius: 20,
- radiusX: { 0: 20 },
- delay: 'stagger(800, 125)',
- }
-});
-
-const o = new mojs.Burst({
- ...MAIN_OPTS,
- width: 10, height: 10,
-
- children: {
- ...CHILD_OPTS,
- delay: 'stagger(650, 125)',
- }
-});
-
-
-const timeline = new mojs.Timeline;
-timeline
- .add( o, vertLine, horLine );
-
-new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });
-```
-
-
-# https://codepen.io/sol0mka/pen/79db23782ec1eb9d16246b136ec82b9c
-
-```js
-const COLORS = {
- RED: '#FD5061',
- YELLOW: '#FFCEA5',
- BLACK: '#29363B',
- WHITE: 'white',
- VINOUS: '#A50710'
-}
-
-const burst1 = new mojs.Burst({
- left: 0, top: 0,
- count: 5,
- radius: { 50: 250 },
- children: {
- fill: 'white',
- shape: 'line',
- stroke: [ COLORS.WHITE, COLORS.VINOUS ],
- strokeWidth: 12,
- radius: 'rand(30, 60)',
- radiusY: 0,
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- degreeShift: 'rand(-360, 360)',
- isForce3d: true,
- }
-});
-
-document.addEventListener( 'click', function (e) {
- burst1
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/3b9c757a7625dc015753740bcad8fb66
-
-```js
-const COLORS = {
- RED: '#FD5061',
- YELLOW: '#FFCEA5',
- BLACK: '#29363B',
- WHITE: 'white',
- VINOUS: '#A50710'
-}
-
-const burst1 = new mojs.Burst({
- left: 0, top: 0,
- count: 5,
- radius: { 50: 250 },
- children: {
- fill: 'white',
- shape: 'line',
- stroke: [ COLORS.WHITE, COLORS.VINOUS ],
- strokeWidth: 12,
- radius: 'rand(30, 60)',
- radiusY: 0,
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- degreeShift: 'rand(-360, 360)',
- isForce3d: true,
- }
-});
-
-const burst2 = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: { 0: 250 },
- rotate: 'rand(0, 360)',
- children: {
- shape: [ 'circle', 'rect' ],
- points: 5,
- fill: [ COLORS.WHITE, COLORS.VINOUS ],
- radius: 'rand(30, 60)',
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- isForce3d: true
- }
-});
-
-document.addEventListener( 'click', function (e) {
- burst1
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- burst2
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/4c8366d3a7eea2a5f83a3d457f8e9cd9
-
-```js
-const COLORS = {
- RED: '#FD5061',
- YELLOW: '#FFCEA5',
- BLACK: '#29363B',
- WHITE: 'white',
- VINOUS: '#A50710'
-}
-
-const burst1 = new mojs.Burst({
- left: 0, top: 0,
- count: 5,
- radius: { 50: 250 },
- children: {
- fill: 'white',
- shape: 'line',
- stroke: [ COLORS.WHITE, COLORS.VINOUS ],
- strokeWidth: 12,
- radius: 'rand(30, 60)',
- radiusY: 0,
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- degreeShift: 'rand(-360, 360)',
- isForce3d: true,
- }
-});
-
-const burst2 = new mojs.Burst({
- top: 0, left: 0,
- count: 3,
- radius: { 0: 250 },
- children: {
- shape: [ 'circle', 'rect' ],
- points: 5,
- fill: [ COLORS.WHITE, COLORS.VINOUS ],
- radius: 'rand(30, 60)',
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- isForce3d: true
- }
-});
-
-const CIRCLE_OPTS = {
- left: 0, top: 0,
- fill: COLORS.WHITE,
- scale: { .2: 1 },
- opacity: { 1: 0 },
- isForce3d: true,
- isShowEnd: false
-}
-
-const circle1 = new mojs.Shape({
- ...CIRCLE_OPTS,
- radius: 200,
- });
-
-const circle2 = new mojs.Shape({
- ...CIRCLE_OPTS,
- radius: 240,
- easing: 'cubic.out',
- delay: 150,
-});
-
-document.addEventListener( 'click', function (e) {
- burst1
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- burst2
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- circle1
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- circle2
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/699cfc8716a13e0e1c15105af2b6fb95
-
-```js
-const COLORS = {
- RED: '#FD5061',
- YELLOW: '#FFCEA5',
- BLACK: '#29363B',
- WHITE: 'white',
- VINOUS: '#A50710'
-}
-
-const bgBurst = new mojs.Burst({
- left: 0, top: 0,
- count: 3,
- radius: 0,
- degree: 0,
- isShowEnd: false,
- children: {
- fill: [ COLORS.RED, COLORS.WHITE, COLORS.BLACK ],
- radius: 'stagger(200, 2)',
- scale: { .25 : 3 },
- duration: 500,
- delay: 'stagger(50)',
- easing: [ 'cubic.out', 'cubic.out', 'cubic.out' ],
- isForce3d: true,
- }
-});
-
-const burst1 = new mojs.Burst({
- left: 0, top: 0,
- count: 5,
- radius: { 50: 250 },
- children: {
- fill: 'white',
- shape: 'line',
- stroke: [ COLORS.WHITE, COLORS.VINOUS ],
- strokeWidth: 12,
- radius: 'rand(30, 60)',
- radiusY: 0,
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- degreeShift: 'rand(-360, 360)',
- isForce3d: true,
- }
-});
-
-const burst2 = new mojs.Burst({
- top: 0, left: 0,
- count: 3,
- radius: { 0: 250 },
- children: {
- shape: [ 'circle', 'rect' ],
- points: 5,
- fill: [ COLORS.WHITE, COLORS.VINOUS ],
- radius: 'rand(30, 60)',
- scale: { 1: 0 },
- pathScale: 'rand(.5, 1)',
- isForce3d: true
- }
-});
-
-const CIRCLE_OPTS = {
- left: 0, top: 0,
- fill: COLORS.WHITE,
- scale: { .2: 1 },
- opacity: { 1: 0 },
- isForce3d: true,
- isShowEnd: false
-}
-
-const circle1 = new mojs.Shape({
- ...CIRCLE_OPTS,
- radius: 200,
- });
-
-const circle2 = new mojs.Shape({
- ...CIRCLE_OPTS,
- radius: 240,
- easing: 'cubic.out',
- delay: 150,
-});
-
-document.addEventListener( 'click', function (e) {
- burst1
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- burst2
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- circle1
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- circle2
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- bgBurst
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/6caf96461207a5caa9226fbd2631569d
-
-```js
-const COLORS = {
- RED: '#FD5061',
- YELLOW: '#FFCEA5',
- BLACK: '#29363B',
- WHITE: 'white',
- VINOUS: '#A50710'
-}
-
-const burst1 = new mojs.Burst({
- left: 0, top: 0,
- count: 8,
- radius: { 50: 150 },
- children: {
- shape: 'line',
- stroke: [ 'white', '#FFE217', '#FC46AD', '#D0D202', '#B8E986', '#D0D202' ],
- scale: 1,
- scaleX: { 1 : 0 },
- // pathScale: 'rand(.5, 1.25)',
- degreeShift: 'rand(-90, 90)',
- radius: 'rand(20, 40)',
- // duration: 200,
- delay: 'rand(0, 150)',
- isForce3d: true
- }
-});
-
-const largeBurst = new mojs.Burst({
- left: 0, top: 0,
- count: 4,
- radius: 0,
- rotate: 45,
- radius: { 0: 450 },
- children: {
- shape: 'line',
- stroke: '#4ACAD9',
- scale: 1,
- scaleX: { 1 : 0 },
- radius: 100,
- duration: 450,
- isForce3d: true,
- easing: 'cubic.inout'
- }
-});
-
-const CIRCLE_OPTS = {
- left: 0, top: 0,
- scale: { 0: 1 },
-}
-
-const largeCircle = new mojs.Shape({
- ...CIRCLE_OPTS,
- fill: 'none',
- stroke: 'white',
- strokeWidth: 4,
- opacity: { .25 : 0 },
- radius: 250,
- duration: 600,
-});
-
-const smallCircle = new mojs.Shape({
- ...CIRCLE_OPTS,
- fill: 'white',
- opacity: { .5 : 0 },
- radius: 30,
-});
-
-document.addEventListener( 'click', function (e) {
-
- burst1
- .tune({ x: e.pageX, y: e.pageY })
- .generate()
- .replay();
-
- largeBurst
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- largeCircle
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- smallCircle
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/97a95a5cb7663cf336e8d80f9f511553
-
-```js
-var burst1 = new mojs.Burst({
- y: { 0: -100, easing: 'cubic.in' },
- count: 'rand(4,6)',
- degree: 40,
- rotate: -25,
- radius: { 0 : 100 },
- children: {
- fill: 'white',
- radius: 'rand(10, 20)',
- pathScale: ['rand(0, .5)', 'rand(.5, 1)'],
- degreeShift: 'rand(.2, 1)',
- swirlFrequency: 'rand(3, 10)',
- direction: [ 1, -1 ],
- isSwirl: true,
- duration: 600,
- easing: 'cubic.out',
- isForce3d: true
- }
-});
-
-
-const timeline = new mojs.Timeline({ speed: .5 });
-timeline.add( burst1 );
-
-new MojsPlayer({
- add: timeline, isPlaying: true, isRepeat: true
-});
-```
-
-
-# https://codepen.io/sol0mka/pen/bbc4c52b7145d9d872ac437f21afd75f
-
-```js
-const BUST_OPTS = {
- parent: '#js-container',
- count: 'rand(3,5)',
- degree: 40,
- rotate: -25,
- radius: { 25 : 75 },
- children: {
- fill: 'white',
- radius: 'rand(8, 15)',
- pathScale: ['rand(0, .5)', 'rand(.35, 1)'],
- degreeShift: 'rand(.2, 1)',
- swirlFrequency: 'rand(3, 5)',
- direction: [ 1, -1 ],
- isSwirl: true,
- duration: 400,
- easing: 'cubic.out',
- isForce3d: true
- }
-}
-
-const burst1 = new mojs.Burst({
- ...BUST_OPTS,
- left: 145,
- top: 75,
- y: { 0: -65 }
-});
-
-const burst2 = new mojs.Burst({
- ...BUST_OPTS,
- left: 295,
- top: 25,
- y: { 0: -50 }
-});
-
-const burst3 = new mojs.Burst({
- ...BUST_OPTS,
- left: 50,
- top: 25,
- y: { 0: -50 }
-});
-
-const burst4 = new mojs.Burst({
- ...BUST_OPTS,
- left: 175,
- top: 0,
- y: { 0: -35 }
-});
-
-
-const timeline = new mojs.Timeline({ speed: .5 });
-timeline.add( burst1, burst2, burst3, burst4 );
-
-document.addEventListener('click', function () {
- timeline.replay();
-});
-
-// new MojsPlayer({
-// add: timeline, isPlaying: true, isRepeat: true
-// });
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
-
-
-#
-
-```js
-
-```
diff --git a/docs/tutorials/easing/path-easing/README.md b/docs/tutorials/easing/path-easing/README.md
deleted file mode 100644
index 3c0b0b06..00000000
--- a/docs/tutorials/easing/path-easing/README.md
+++ /dev/null
@@ -1 +0,0 @@
-Coming soon
diff --git a/docs/tutorials/getting-started.md b/docs/tutorials/getting-started.md
deleted file mode 100644
index a8d590a1..00000000
--- a/docs/tutorials/getting-started.md
+++ /dev/null
@@ -1,84 +0,0 @@
-
-# Getting started
-
-## Setup mo.js in your project
-- Run `npm i @mojs/core` OR `yarn add @mojs/core`
-- Import it `import mojs from '@mojs/core'`
-
- Or use the minified CDN version:
- ```js
-
- ```
-
-- Create your animations. What about a bouncy circle?
-
-
-
-
-
-
----
-
-Or maybe a loading animation?
-
-
-
-
-
-
-Go creative!
-
-See the [API](/api/README.md) for more info.
-
-## Usage with Server Side Rendering (SSR)
-Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the `useEffect` hook or a dynamic import ([read more here](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)). For Angular Universal you can use Guards ([read more about it here](https://github.com/angular/universal/blob/master/docs/gotchas.md#window-is-not-defined)). Lastly if you use Vue with Nuxt.js, you will find [more info here](https://nuxtjs.org/faq/window-document-undefined), or info about using the `mounted` hook [here](https://nuxtjs.org/guides/concepts/server-side-rendering).
-
-Also see tutorial on how to use MoJS inside a [React app here](./usage-with-react.md).
diff --git a/docs/tutorials/shape-swirl/README.md b/docs/tutorials/shape-swirl/README.md
deleted file mode 100755
index aa4ad815..00000000
--- a/docs/tutorials/shape-swirl/README.md
+++ /dev/null
@@ -1,1937 +0,0 @@
-# Shape & ShapeSwirl
-
-
-This post is about Shape and ShapeSwirl - modules that help you to bootstrap motion effects.
-- [API reference](/api/shape-swirl)
-#### Author: [legomushroom](https://github.com/legomushroom/)
-
-* * *
-
-## Shape
-
-`Shape` is a special `mojs` module that bootstraps visual effects. The idea behind `Shapes` is simple and neat - you can have an animatable shape in any part of the screen or an `HTML` element with one declarative call. So it's like saying:
-
-> Hey Computer! I want a pink outlined polygon right in the middle of the screen!
-
-or like something this:
-
-> Hey Machine! I want a dust trail after this element when it moves!
-
-And appropriate effects should appear. Most importantly, `Shape` is a tiny bit that can be composed into more mature modules like [`Burst`](/tutorials/burst/) or `Stagger` which we will discuss shortly in the upcoming tutorials, right now I should make sure you are comfortable with [Shape APIs](/api/shape.md) and use cases.
-
-So in the simplest way - `Shape` is just a declarative shape transition in any desired place of the screen in any moment of the time. The concept can be confusing at first, so I will try to give you as much code samples as possible, there is the first one:
-
-
-```js
-new mojs.Shape({
- shape: 'circle',
- isShowStart: true,
-});
-```
-
-
-
-Nothing interesting yet. Well maybe there is one thing - the shape magically appears just in the middle of the screen. `mojs` takes care to create as narrow container for the shape as possible, bootstraps all the markup and places the result just where you want it. Pretty handy. `isShowStart` property says to the shape to be visible even before any animations starts.
-
-Obviously, you can style the shape as you want (play around with the different props and use the buttons to update the code):
-
-
-
-
-
-
-The entire list of shape properties with comments could be found at [Shape API](/api/shape/) section.
-
-## Value types
-
-When you set colors, they can be expressed in different forms like [color keywords](https://www.w3.org/TR/css3-color/), `rgb`, `rgba` or `hex` (see `stroke` and `fill` properties).
-
-Numeric properties may be unit based (like `top`/`left` below) or can be expressed with `rand` strings (like `x` below):
-
-
-
-
-::: tip
-Use the _Update code_ button to see the random function in use.
-:::
-
-Here above, we've set random value for the `x` property in the interval from `-250` to `250` so it should show up in random position inside that period every time you will rerun the code. `rand` string syntax is simple - it takes start and end value to generate a random value between those two.
-
-With the `x` and `y` properties, the shape is always translated from the current position of the shape, so if the `x` property gets the value of 250px, the circle's gets translated 250px to the right.
-
-### Radius
-The `radius` property sets shape's (no prizes for guessing) radius. Also, you can set `radiusX`/`radiusY` values explicitly:
-
-
-
-
-Worth noting that the `radius` property is a property that determines size of any shape, not just `circle` as in example above, so if you have a shape of `rect` or `polygon` or any other, they would have `radius` properties too, just like a circle shape:
-
-
-```js
-var circle = new mojs.Shape({
- shape: 'circle',
- radius: 10,
- radiusX: 20, // explicit radiusX
- left: '25%',
- fill: 'deeppink',
- isShowStart: true,
-});
-
-var rect = new mojs.Shape({
- shape: 'rect',
- radius: 15,
- left: '50%',
- fill: 'cyan',
- isShowStart: true,
-});
-
-var polygon = new mojs.Shape({
- shape: 'polygon',
- radiusX: 10,
- radiusY: 20,
- left: '75%',
- fill: 'yellow',
- isShowStart: true,
-});
-```
-
-
-Also, worth noting that the `radius` properties control form of shape not just size - it gets pretty clear with `zigzag` or `curve` shapes:
-
-
-```js
-var zigzag = new mojs.Shape({
- shape: 'zigzag',
- points: 11,
- radius: 25,
- radiusY: 50,
- left: '25%',
- fill: 'none',
- stroke: 'deeppink',
- isShowStart: true,
-});
-
-var curve = new mojs.Shape({
- shape: 'curve',
- points: 11,
- radius: 25,
- radiusY: 50,
- left: '50%',
- fill: 'none',
- stroke: 'deeppink',
- isShowStart: true,
-});
-
-var cross = new mojs.Shape({
- shape: 'cross',
- points: 11,
- radius: 25,
- radiusX: 50,
- left: '75%',
- fill: 'none',
- stroke: 'deeppink',
- isShowStart: true,
- y: -25,
-});
-```
-
-
-You can see in example above, the `radiusY` controls size of the spikes for the `zigzag` shape and for the `curve` it controls how much it bends up.
-
-## Boolean properties
-As for boolean properties of the shape, they start with the `is` prefix to separate them from other values (e.g. `isShowStart`, `isShowEnd`, `isYoyo` etc.).
-
-## Delta (∆)
-
-To keep the `APIs` declarative, `mojs` uses `delta` objects to describe transitions of shape properties:
-
-
-
-We have set transition for the `scale` property of the shape from `0` to `1`. As you can see the `delta` in `mojs` is plain javascript object that holds `start` and `end` state of the property, where the `key` of the object is the `start` state and `value` of the object is the `end` state respectively. If you still feel confused, just change `:` to `->` in your mind and you will have `{ '0 -> 1' }` outcome which might be more intuitive.
-
-::: tip
-To play the animation, add the `.play()` method after your shape declaration. For simplicity, we have left that one out for most of the other examples. For other public methods, check out the [API](/api/shape/).
-:::
-
-Start and end values in the `delta` object can be `unit` based or random (`rand`) ones or whatever you have — just the same as we did it before with static values (all objects in the code sample below are deltas):
-
-
-```js
-const circle = new mojs.Shape({
- shape: 'circle',
- scale: { 0 : 1 },
- left: '25%',
- fill: { 'cyan': 'yellow' },
- radius: 25,
-
- duration: 2000,
- repeat: 999,
-}).play();
-
-const rect = new mojs.Shape({
- shape: 'rect',
- left: '50%',
- fill: 'none',
- radius: 20,
- stroke: { 'rgba(0,255,255, 1)' : 'magenta' },
- strokeWidth: { 10: 0 },
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- rotate: { 0: 180 },
-
- duration: 2000,
- repeat: 999,
-}).play();
-
-const polygon = new mojs.Shape({
- shape: 'polygon',
- points: 5,
- left: '75%',
- fill: { 'deeppink' : '#00F87F' },
- x: { 'rand(-100%, -200%)' : 0 },
- rotate: { 0: 'rand(0, 360)' },
- radius: 25,
-
- duration: 2000,
- repeat: 999,
-}).play();
-```
-
-
-Here, delta of the `strokeDashoffset` property on the rectangle uses **_unit based_** values. The delta of the `x` property of the polygon shape uses random unit based values. The delta of the `fill` property for all the shapes uses **_color keywords_** to describe color transitions.
-
-The nice thing about declarative APIs is that you define _what_ you want to do by contrast with _how_ to do it, so it makes the intention of the transition crystal clear with just one short glimpse. Consider this code sample of a trirotate:
-
-
-
-
-
-If you will translate this code sample to proper English, you will have something like this — we have a `orange` `polygon` of `65px radius` right in the middle of the screen(by default), when animation starts — it rotates from `-120` to `-40` degrees, shifts `180px` to the right starting from `-200px` and `scale`s from `0` to `1.3` concurrently. That happens during `800ms` and repeats `10` times with default `easing` and `sin.in` easing when moving backward in `yoyo` period. When animation ends, the shape `disappears`.
-
-Note that almost every property transition besides `tween` properties (like duration/delay etc) and `boolean` values, can be expressed with `delta` object, please refer to the [API](/api/shape/) on that matter. The `∆` symbol in the comment right above properties defines that the property is _"deltable"_ thus supports delta transitions.
-
-### Delta easing
-Delta can also have its own explicit `easing` field that can hold any `mojs` easing type, this makes shape transitions more flexible to the real world needs.
-
-
-
-
-Here above, we've defined the explicit easing values for `scale` and `fill` properties.
-
-
-### Delta curve
-The 3rd property that is available on delta objects is `curve` property that overrides `easing` property if both present. The `curve` property is the way to go if you want to declare a `property curve` for a property transition, where start and end values of the `delta` are based on a curve, that will be multiplied by current curve's value when animation runs:
-
-
-```js
-const shiftCurve = mojs.easing.path( 'M0,100 C50,100 50,100 50,50 C50,0 50,0 100,0' );
-const scaleCurveBase = mojs.easing.path( 'M0,100 C21.3776817,95.8051376 50,77.3262711 50,-700 C50,80.1708527 76.6222458,93.9449005 100,100' );
-const scaleCurve = (p) => { return 1 + scaleCurveBase(p); };
-const nScaleCurve = (p) => { return 1 - scaleCurveBase(p)/10; };
-
-const circle = new mojs.Shape({
- shape: 'rect',
- fill: { '#F64040' : '#F64040', curve: scaleCurve },
- radius: 10,
- rx: 3,
- x: { [-125] : 125, easing: shiftCurve },
- scaleX: { 1 : 1, curve: scaleCurve },
- scaleY: { 1 : 1, curve: nScaleCurve },
- origin: { '0 50%' : '100% 50%', easing: shiftCurve },
-
- isYoyo: true,
- delay: 500,
- duration: 800,
- repeat: 999
-}).play();
-```
-
-
-We won't spend a lot of time with `property curves` in this tutorial, but I highly encourage you to dig into the [topic](/tutorials/easing/path-easing/) because it is a very sophisticated and powerful concept to note.
-
-So to recap, `delta`'s syntax:
-
-```js
-{
- startState: endState,
- easing: 'cubic.out', // optional `easing`,
- curve: 'M0,100 L100,0' // optional `curve` that suppress `easing` if both present
-}
-```
-
-At this point we can declare and animate shapes.
-
-Then what?
-
-## Then Zen
-
-You can chain shape states with `then` calls (hit play button to see):
-
-
-
-::: tip Note
-In the demo above, I've added `MojsPlayer` to control the demo sequence instead of explicit `.play` call on the shape. `MojsPlayer` is part of **_mojs tools_** that gives you GUI controls thus helps you to craft your motion sequences. Also, it keeps the animation state and settings on page reloads, saving you lots of time and effort. Since our animations can get quite complex, the player could be a good aide. [Read more here](/tools/#player) how to use it.
-:::
-
-So in the demo above, we have continued the sequence with the next state declaration for the `strokeWidth` and `scale` properties. What's important - `then` doesn't need delta to describe new transition - it creates delta automatically from whatever property value was before to the new one.
-
-If you want explicitly specify `easing` for next property state - you can use object instead of primitive value, where `to` key describes the next state ( see `scale` property in `then` call above).
-
-Yet you can set entire new `delta` for `then` call (see `strokeWidth` and `stroke` property in `then` call below):
-
-
-
-
-As you can witness, setting new `delta` in `then` call tells `mojs` to ignore everything whatever was before and proceed with completely new delta transition.
-
-The last thing to note is that if the `duration` property is not set in the new `then` call, it inherits the value from the previous block:
-
-
-
-
-
-So in the code sample above, the duration inside `then` call has the same value of `600ms` inherited from the previous state block, but the `delay` has the default value of `0`.
-
-## Tweenable Interface
-
-`Shape` obeys `tweenable` interface thus it has the same `tween properties`, `callbacks` and `public methods` as any [tween](/api/tweens/tween.md) has:
-
-```js
-const shape = new mojs.Shape({
- // shape properties which we have already used
- shape: 'rect',
- stroke: 'cyan',
- rotate: { [-360] : 0 },
-
- // tween properties
- duration: 600,
- delay: 200,
- repeat: 0,
- speed: 1,
- yoyo: false,
- easing: 'sin.out',
- backwardEasing: 'sin.in',
- yoyo: true,
-
- // callbacks
- onStart (isForward, isYoyo) {
- //...
- },
- onRepeatStart (isForward, isYoyo) {
- //...
- },
- onUpdate (ep, p, isForward, isYoyo) {
- //...
- },
- onRepeatComplete (isForward, isYoyo) {
- //...
- },
- onComplete (isForward, isYoyo) {
- //...
- },
- onProgress (p, isForward, isYoyo) {
- //...
- },
- onRefresh (isBefore) {
- //...
- },
- onPlaybackStart () {},
- onPlaybackPause () {},
- onPlaybackStop () {},
- onPlaybackComplete () {},
-})
-// tween public methods
-.play()
-.playBackward()
-.pause()
-.stop()
-.replay()
-.replayBackward()
-.setProgress()
-.setSpeed()
-.reset()
-```
-
-
-
-Also implementing `tweenable` interface means that any `Shape` can be `add`ed or `append`ed to any `timeline` exact the same way as any simple `tween`:
-
-
-```js
-const timeline = new mojs.Timeline;
-timeline
- .add( rect, circle, triangle, polygon, triangle2, polygon2, circle2 );
-```
-
-
-
-Here above we have added shapes to timeline just like any tween - with the `add` public method.
-
-## Tune
-
-After you have created a shape, you can `tune` any of its properties before starting the animation. The `tune` method is handy when you want to add some interactivity to your animation or to play the shape regarding user input - the method was designed exactly for this purpose(click somewhere to see):
-
-
-```js
-document.addEventListener( 'click', function (e) {
-
- circle1
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
- circle2
- .tune({ x: e.pageX, y: e.pageY })
- .replay();
-
-});
-```
-
-
-::: tip
-See the full source code on [codepen](https://codepen.io/sol0mka/pen/XKdWJg). You can also see how to use it in a container like we do it on this demo page [in this pen](https://codepen.io/sandstedt/pen/PgyYro)
-:::
-
-
-Here above, we have tuned `x` and `y` properties of the circles before `replay`ing it. Any properties besides `shape` ones could be tuned at any moment of time.
-
-Note that `tune` call transforms entire shape's property query that was set up with `then` calls. It works that way to keep the chain up to date starting from the newly tuned value. Thus you tune not only the first shape state but the subsequent ones. For instance, if you had a chain of y `-50 -> 50` then `100`, and tune it to `-100`, you will eventually have `-150 -> -150 -> 100` chain. But if you will tune to delta value like `-100 -> 0`, you will have the `-100 -> 0 -> 100` chain as the result (click somewhere to see):
-
-
-```js
-const circle = new mojs.Shape({
- y: { [-50] : 0 },
-}).then({
- y: 100
-});
-
-document.addEventListener( 'click', function (e) {
-
- // no tune
- circle1
- .replay();
-
- // static value tune, results in -100 for the first block,
- // transforms the second block to the '-100 -> 100' delta
- circle2
- .tune({ y: -100 })
- .replay();
-
- // delta tune, results in -100 : 25 for the first block,
- // transforms the second block to the '25 -> 100' delta
- circle3
- .tune({ y: { [-100] : 0 } })
- .replay();
-});
-```
-
-
-
-
-
-_1st circle wasn't tuned at all, 2nd circle was tuned to static value, 3rd circle was tuned to new delta value_
-
-
-## Generate
-
-The `generate` method is very similar to `tune` one, but it doesn't receive any options. The method was designed to regenerate randoms that the shape had on initialization:
-
-
-```js
-/* Props from smallCircles:
-{
- delay: 'rand(0, 350)',
- x: 'rand(-50, 50)',
- y: 'rand(-50, 50)',
- radius: 'rand(5, 20)'
-}
-*/
-
-document.addEventListener( 'click', function (e) {
- for ( let i = 0; i < smallCircles.length; i++ ) {
- smallCircles[i]
- .generate()
- .replay();
- }
-});
-```
-
-
-
-Here above, shapes had randoms in `delay`, `x`, `y` and `radius` properties. Then we've added the mouse click handler, and `generate` the shapes inside, as the result, we have unique effect pattern every time the click event fires. [See full code here.](https://codepen.io/sol0mka/pen/7d905a98fd120441f52df0b59421fc80)
-
-## Custom Shapes
-
-You probably have noticed that mojs supports a bunch of built in shapes. Namely, they are `circle`, `rect`, `polygon`, `line`, `cross`, `equal`, `curve` and `zigzag`. You can extend this set of shapes by providing mojs with a custom one that suits your needs. For that:
-
-* Draw your shape on a `100x100` artboard (viewBox) in any vector editor and save the shape as a `svg`.
-* Create a class that extends the `mojs.CustomShape` class.
-* Copy the shape tags from within the svg file...
- ```svg{2}
-
- ```
-* ... and paste and return them inside a `getShape` method.
- ```js
- class Bubble extends mojs.CustomShape {
- getShape () { return ''; }
- getLength () { return 200; } // optional
- }
- ```
-
-* Now you can register this shape in mojs with a `custom name` that will be used further in `shape` property of `mojs.Shape` constructor as you did it before:
-
-```js
-mojs.addShape( 'bubble', Bubble ); // passing name and Bubble class
-// now it is avaliable on mojs.Shape constructor as usual
-new mojs.Shape({ shape: 'bubble' });`
-```
-
-All together in one block:
-
-
-```js
-/* ADD CUSTOM SHAPE SOMEWHERE IN YOUR CODE */
-class Heart extends mojs.CustomShape {
- getShape () { return ''; }
- getLength () { return 200; } // optional
-}
-mojs.addShape( 'heart', Heart ); // passing name and Bubble class
-
-/* USE CUSTOM SHAPE */
-// now it is available on mojs.Shape constructor as usual
-const heart = new mojs.Shape({
- shape: 'heart', // <--- shape of heart is now available!
- fill: 'none',
- stroke: 'red',
- scale: { 0 : 1 },
- strokeWidth: { 50 : 0 },
- y: -20,
- duration: 1000,
-});
-```
-
-
-
-Worth noting that you should remove all presentation attributes from svg tags to give `mojs` the ability to style them, otherwise the values will be static:
-
-
-```js
-/* ADD CUSTOM SHAPE */
-class Heart extends mojs.CustomShape {
- getShape () {
- return '' + '' + ''; // see full code here: https://codepen.io/sol0mka/pen/d2be0ef912c7e21e0e990536ed6d39fa
- }
- getLength () { return 200; } // optional
-}
-mojs.addShape( 'heart', Heart ); // passing name and Bubble class
-
-/* USE CUSTOM SHAPE */
-// now it is available on mojs.Shape constructor as usual
-const heart = new mojs.Shape({
- shape: 'heart',
- fill: 'none',
- stroke: { 'white' : 'deeppink' },
- scale: { 0 : 1 },
- strokeWidth: { 50 : 0 },
- y: -20,
- duration: 1000,
-});
-```
-
-
-
-Here above, the middle heart has static `stroke` property on its tag, so it was left unattended by contrast with other two.
-
-Regarding the second `getLength` lifecycle method, - it is handy only if you want to use relative percent values for `strokeDasharray`/`strokeDashoffset` properties. Since `mojs` knows very little about the custom shape you have had provided, it is on you to specify what is the perimeter length of the custom shape. In the example below, we return the precise `292.110107421875` length of the heart from the `getLength` method, this allows us to use percent values in `strokeDash*` properties.
-
-
-```js
-/* ADD CUSTOM SHAPE */
-class Heart extends mojs.CustomShape {
- getShape () { return ''; } // see full code here: https://codepen.io/sol0mka/pen/75894cd43b0f12ecdb425cad5149ab37
- getLength () { return 292.110107421875; } // optional
-}
-mojs.addShape( 'heart', Heart ); // passing name and Bubble class
-
-/* USE CUSTOM SHAPE */
-// now it is available on mojs.Shape constructor as usual
-const heart = new mojs.Shape({
- shape: 'heart',
- fill: 'none',
- stroke: 'white',
- strokeDasharray: '100%',
- strokeDashoffset: { '-100%' : '100%' },
- y: -20,
- duration: 1000,
-});
-```
-
-
-Here above, we are using percent values for `strokeDashoffset` property so we had to provide the custom shape with `getLength` method for precise stroke dash length calculations. Read how to find out what the exact length is [in the Wiki](https://github.com/mojs/mojs/wiki/Get-the-exact-length-for-a-custom-shape).
-
-## ShapeSwirl
-
-`ShapeSwirl` module basically is a `Shape` with a little bit more functionality bolted on. ShapeSwirl automatically calculates sinusoidal x/y path for shape making it easy to send the shapes over sine trajectories.
-
-
-```js
-const shapeswirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- duration: 1000
-});
-```
-
-
-::: tip
-Note that the ShapeSwirl has the default of `{ 1 : 0 }` for the `scale` property so it fades out.
-
-To trigger the animation we have added a click event listener to the container and then run `shapeswirl.replay()`.
-:::
-
-To give you control over this behavior, ShapeSwirl accepts more `6` properties, thus you can define frequency or size of the path and other supporting parameters:
-
-```js
-const shapeSwirl = new mojs.ShapeSwirl({
- y: { 0: -150 },
- // other props:
- isSwirl: true, // sets if the shape should follow sinusoidal path, true by default
- swirlSize: 10, // defines amplitude of the sine
- swirlFrequency: 3, // defines frequency of the sine
- pathScale: 'rand( .1, 1 )', // defines how much the total path length should be scaled
- direction: 1, // direction of the sine could be 1 or -1
- degreeShift: 45, // rotatation shift for the sinusoidal path
-});
-```
-
-### 1. isSwirl
-The `isSwirl` property (`true` by default) defines if shape should follow sine path, if set to `false` it will act exactly the same as simple `Shape`.
-
-### 2. swirlSize
-The `swirlSize` property (`10` by default) defines the deviation or amplitude of the sine. Here is an example with `swirlSize: 35`:
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- radius: 8,
- swirlSize: 35,
- swirlFrequency: 4,
- duration: 1000,
- direction: -1,
-});
-```
-
-
-### 3. swirlFrequency
-The `swirlFrequency` property (`3` by default) defines the frequency of the sine, here is an example with `swirlFrequency: 10`:
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- radius: 8,
- swirlFrequency: 10,
- duration: 1000,
-});
-```
-
-
-### 4. direction
-The `direction` property (`1` by default) defines direction of the amplitude of the sine - it have value of either `1` or `-1`. Here is the example for `-1`. Note how it starts to the left instead of right:
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- radius: 8,
- direction: -1,
- swirlSize: 35,
- swirlFrequency: 4,
- duration: 1000
-});
-```
-
-
-### 5. pathScale
-The `pathScale` property (`1` by default) defines the scale size of the sine path. Here is an example of `pathScale: .5` - which scales the sine by half (of the original radius):
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- radius: 8,
- pathScale: .5,
- duration: 1000,
-});
-```
-
-
-
-You are probably thinking - why not just to shorten the `y` value instead of `pathScale` one? Well, because the `pathScale` scales the actual path of the swirl, for instance if you will add the transition for the `x` property, the path scale will affect the product of `y` and `x` - the actual path that the shape makes while move:
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- x: { 0: -100 },
- y: { 0: -150 },
- radius: 8,
- pathScale: .5,
- duration: 1000,
-});
-```
-
-
-The `pathScale` property will become very useful when we will discuss the `Burst` module shortly and will have a bunch of `ShapeSwirls` at once, especially when we will need to randomize their sine lengths.
-
-### 6. degreeShift
-The `degreeShift` property (`0` by default) defines rotatation of the swirl. This property becomes interesting when `shapeSwirl` is used inside other modules (like `Burst`). For now it will act just like rotatation of the sine path. Here is an example for `degreeShift: 90`:
-
-
-```js
-const swirl = new mojs.ShapeSwirl({
- fill: '#F64040',
- y: { 0: -150 },
- radius: 8,
- degreeShift: 90,
- duration: 1000,
-});
-```
-
-
-How ShapeSwirl can be handy will be cristal clear soon, in short, the main idea behind swirls is to give you the ability to compose dust/smoke/bubbles effects or basically any effect that needs shapes to move over sine path:
-
-
-
- [See code here](https://codepen.io/sol0mka/pen/90e2506d73313d14d49486f7d71fb9d0)
-
-
-
-Except those 6 properties, the `ShapeSwirl` is the same as a simple `Shape`.
-
-
-## Recap
-
-That was a pretty fast intro to the `Shape` module. You can use [Shape APIs](/api/shape) and [ShapeSwirl API](/api/shape-swirl) sections as reference further on. What is important ro remember:
-* You can create a `Shape` in any part of the screen, or an HTML element using the parent prop.
-* If you want to animate some property — you add a `delta` object (`{'from': to}`) that describes the transition of that property.
-* You can chain the shape transitions with `then` calls and `tune` new properties when you want.
-* Tweenable interface allows you to work with `Shape` in the same way you work with any other `Tween`.
-
-Now you probably asking yourself - Why do we need something as simple as an animatable shape? In the next section I will cover few use cases for shapes but most importantly it will become crystal clear why do we need shapes in the next [Burst Tutorial](/tutorials/burst/). Probably, you can treat this tutorial as finished at this point, the further sections are rather optional and were written just for fun. So you can skip reading them in favor of [Burst Tutorial](/tutorials/burst/) but I highly encourage you to continue reading to gain solid understanding of the shapes.
-
-* * *
-
-## Use Cases
-
-> Please note that the use cases section contains a lot of live code examples but the actual code samples are omitted for time savings and simplicity sake. The actual code is still available in the Codepen link and I highly encourage you to read through and play with them while we will walk through this section. You can omit reading large demos code since it is probably unreadable (Codepen can contain bundled code) or it could be too large to understand sparingly, but you can return to them later, - after you will complete this tutorial. I will leave a little (×) mark for you to indicate that you can skip reading the source code of the Codepen for now.
-
-Despite the fact that `Shape` and `ShapeSwirl` modules are nothing than tiny bits that compose higher order modules creating some matured effects, they have strong use cases and can be used on their own. There is no thing in the whole world such expressive and appealing as simple geometric shapes so they are ubiquitous in the motion graphics nowadays. You can use shapes in your animations to add special effects and details making your animation more expressive. Also, `Shapes` are often used to implode them into `UI` thus enhancing it. From the development point of view — `Shape` can be created with just one declarative call allowing you to focus entirely on you motion sequences and don't spend the time bootstrapping things, this fact powers you with a `"shape framework"` to think in, so your motion sequences get more organized and consistent.
-
-I hope you don't believe that `Shapes` are useful just because I claimed it out loud, so let me convince you with the next real world use cases. Note that the code samples are omitted in this section but feel free to check Codepen link to tweak the part that interests you.
-
-### Motion Graphics Use Cases
-
-Motion graphics is indeed one of the strongest use cases for `Shapes`. Nothing breathes life into static content better than the use of motion graphics. With shapes, the limits are simply the imagination of the designer or the artist, - you can create complex mograph sequences based entirely on geometric or custom shapes or use them aside as reinforcement support.
-
-#### Bubbles
-
-Let's start with the simple intro sequence, it was composed of custom "speech bubble" shapes and few built in ones.
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/EyKxqO)
-
-Custom shapes allow you to use shapes that suite your current needs. To be clear that's not just images that you can animate inside some wrapper, they are highly styleable shapes thus a way flexible than just an image or HTMLElement with some background.
-
-#### Geometric Scenes
-
-Let's walk through some short random geometric scenes just to get some intuition about shape usage with mograph. After that, we will combine them to get slightly longer intro sequence.
-
-We will start with a simple and appealing triangles scene. Just 6 triangles and few `then` statements:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/4db9ec6079a3537d8c60ec888dd8e532)
-
-We will compose the next scene by using another 6 triangles, slightly more elegant, with a little contrast to the first one, but still quite simple:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/c0b7b94e90142f19acba6ed9a4b05a2f)
-
-Let's do the next one with contrast to these two, - simple rectangle with some sparks, this one rather funky:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/c33a3582fc02842b99fa6eb01be6b3ba)
-
-Note that the best module to use for the white `sparks` effect on the sides of the square would be the `Burst` module which we will discuss shortly in the next tutorial. Meanwhile in this particular demo, it was made with custom shapes to give you yet another clue how you would use the custom shapes.
-
-After that we need a nice transition between screens, just a few circles will do the trick:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/95a862f1ad8445134466ad7d64213d46)
-
-::: warning Accessibility warning
-When making fullscreen transitions, make sure to include a chech for if the user preferes reduced motion. We don't wanna trigger a migrane attack for our user. For example, you can play the animation from the end instead of frame 0, to ensure the last frame will be visible:
-
-```js
-let prefersReducedMotion = false;
-const motionQuery = matchMedia('(prefers-reduced-motion)');
-const handleReduceMotionChanged = () => {
- prefersReducedMotion = motionQuery.matches; // set to true if user preferes reduced motion
-}
-motionQuery.addListener(handleReduceMotionChanged);
-handleReduceMotionChanged(); // trigger once on load to check initial value
-
-this.timeline.play(
- prefersReducedMotion ? 1000 : 0; // 1000 = the length/end of the timeline
-);
-```
-[Read more at CSS-tricks](https://css-tricks.com/introduction-reduced-motion-media-query/).
-:::
-
-The last scene for this sequence would be `mojs` logo reveal - use case for shapes in tandem with `property curves`:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/b37bb9c6dede99d0ac75d60b5fb0d43d)
-
-
-Now, let's finally compose these short scenes into one:
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/RRRgLq)
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo1) since the bundled Codepen code ~~could be~~ **is** unreadable._
-
-#### Word reveal
-
-
-[Link to pen](https://codepen.io/sol0mka/pen/c94452fb65dbf676b0ae8a12d4267473)
-
-
-That's was the last demo for the mograph use cases, I hope you getting more convinced that shapes could be useful sometimes. Let's move on.
-
-## Inspiration
-There are also few gifs for your inspiration. All of them pretty much easy with `mojs` shapes:
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-## Animation Use Cases
-Animation is another field for Shapes application. You can compose some visual effects to support your main sequence, crafting more details and depth.
-
-I've made a little animation demo as a starting point to which we will apply some effects. 4 physical balls in a harsh living situation(x):
-
-
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo2) since the bundled Codepen code could be unreadable._
-
-The demo itself is a good illustration of how you can use shapes as "main actors" in your scenes because it was made entirely with shapes. But there are few cases that should be discussed besides that.
-
-For instance, you can add the effect of collision between balls with ease(x):
-
-
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo2) since the bundled Codepen code could be unreadable._
-
-As you would expect, the effect itself was composed of bunch of shapes and swirls:
-
-
-
-
-The next effect, you can add to the scene is the "motion trails" effect (x):
-
-
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo2) since the bundled Codepen code could be unreadable._
-
-Motion trail effect is usually used to exaggerate velocity of the object that moves and the environment it moves in. Just a nice subtle detail. The effect was composed of 2 shapes, namely curves.
-
-There is another simple example with lines instead of curves:
-
-
-
-The next effect that can fit this scene is the "dust trail" effect (x):
-
-
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo2) since the bundled Codepen code could be unreadable._
-
-It was composed of bunch of swirls, let's spend some time and see how exactly you can build something like that. First, you want to make the swirls move downward, - somewhere into the ground:
-
-
-
-Then put these swirls inside `overflow: hidden` container to constrain the visible area:
-
-
-
-As the last touch, you need to add 2 swirls that will fade upward at the end:
-
-
-
-To recap, there is the same exact effect with simple object:
-
-
-
-_Note: Again, this dust effect could be done with just one declarative call with `Burst` or `Stagger` modules that we will discuss shortly, but for now let's keep it `Swirl`._
-
-That's basically all for animation use cases. My effort in this section was focused to convey the idea of how you can use the shapes to enhance and support your main animation scenes, applying little effects and details.
-
-
-Just a few gifs for your inspiration:
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-
-## UI Use Cases
-
-UI is another common use case for shapes. You can enhance UI transitions with shapes, add effects or even implode shapes to use them as part of UIs.
-
-Usually motion in UI helps the user to catch a clue about position, purpose and intention of the UI element.
-
-### Bubble Close Button
-
-The next demo illustrates how the shapes can be used to appeal users' attention, providing them with feedback about availability of the control element in a playful way. There is a demo with two shapes that act in place of UI element:
-
-
-
-Then you can add even more effects to the button to fit the mood of your current UIs, for instance "bubble UI":
-
-
-
-If user will click the close button, we need to remove it, for that we can add a "bubbles fade out" effect to keep the "bubbles" pace:
-
-
-
-This is how it will look like if we will connect these two transitions (click the close button):
-
-
-
-That's the exact same effect I've used in Bubble Layout demo a while ago, when I was trying to convey the bubble interface (click on any circle to see the close button)(x):
-
-
-
-In this demo above you can notice two more effects that were made with shapes, - one is the subtle white ripple that spreads out when you click on any bubble (click somewhere to see):
-
-
-
-The second one is the white collision effect right under the project image box when it jumps over the screen:
-
-
-
-### Micro Interactions
-
-Since the shapes are tuneable, you can add effects to you UI regarding user interactions (hover over the links to see):
-
-
-
-Another demo for micro interactions is the pointer ripple, the effect that spreads out after a user clicks any touchable surface. The `mojs-player` itself has a lot of those so I will put an empty player as demo (click on player controls to see):
-
-
-
-That's basically exact the same principle we have used in this tune demo (click somewhere to see):
-
-
-
-### Love/Hate Modal
-
-OK. Let's do another demo with shapes regarding UI. This time, we will have a plus button, it will show up from bottom left, after it will stop - we will mimic button push transition by adding the concurrent rotation of the button. By that we will imitate "let's go/follow me" gesture, inviting user to follow up with a click:
-
-
-
-Then we can expand the button sequence even more to add some playful splash effect:
-
-
-
-Then, if user doesn't click the button for a while, let's invite him to proceed by adding the callout vibration, to mime an incoming call:
-
-
-
-When the user eventually will click the button, we will show the quiz modal with the most valuable question we have ever had. That's how the modal will look like:
-
-
-
-Every piece of this sequence above is composed of shapes - ripple inside a modal, few details in the top and bottom right corners, background spread effect, modal shape itself and its corner are shapes too.
-
-Now when the user hovers over any button, we need to show some tension, conveying that something is going to happen if he will proceed with a click (hover over buttons to see):
-
-
-
-The extend parts of inflating modal are nothing than plain shapes, in fact - `curve`s that just get scaled when the user hovers over the buttons. I've set the modal shape to disappear to reveal the extending parts so it will be clear for you what I mean (hover over buttons):
-
-
-
-As you can see now - the extending parts are just `curves` on each side of the modal. They get larger when user hovers over the buttons.
-
-Next, if user leaves the button with his pointer, we need to show the tension relief by mimicking the air currents that float out of the modal, just a few swirls would do here (hover over buttons and then release to see):
-
-
-
-In the other case, when the user finally proceeds with the button click, we will blow up the modal as a consequence of the modal's tension and show the chosen word. That's the entire sequence (x):
-
-
-
-_You can find the entire source code in [this repo](https://github.com/legomushroom/shape-demo3) since the bundled Codepen code could be unreadable._
-
-There are few gifs for your inspiration over the UI's and shapes:
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-
-
-
-## It's a wrap!
-
-Phew, that was intense. I hope you didn't get bored. We have touched only the surface of possible use cases in this post but I hope it puts some light on why and when you can use shapes. At this point it's probably clear that to create a shape you use a declarative call and the shape appears in any place of the screen (or HTMLElement) you want without any bootstrapping. You can use `then` method to chain states of shape and `tune` them afterward or even re`generate` all random properties on it before starting the animation. Remember that shapes obey the `tweenable` interface thus it has tween properties, callbacks and public methods that any `tween` has.
-
-Need to admit that this post was written as an introduction to more complex and mature module that is called `Burst`, it was important to familiarize you with the base concepts and API's syntax before we will proceed further. I think now you are ready to meet the [Burst](/tutorials/burst/)!
-
-## Thank you!
-
-I deeply appreciate you did it down here, I tried to make it not so boring for you. For any questions, catch me on twitter ([@legomushroom](https://twitter.com/legomushroom)), ask a question on StackOverflow with `#mojs` tag, rise an issue on [GitHub repo](https://github.com/mojs/mojs) or join our [Slack Community](https://mojs.slack.com/). You can help the project on [GitHub](https://github.com/mojs/). {'Love <3.'}
-
-Kudos to [Jonas Sandstedt](https://twitter.com/jonassandstedt) for his help in rewriting and proof reading this tutorial!
diff --git a/docs/tutorials/usage-with-react.md b/docs/tutorials/usage-with-react.md
deleted file mode 100644
index 93226e6f..00000000
--- a/docs/tutorials/usage-with-react.md
+++ /dev/null
@@ -1,351 +0,0 @@
----
-title: Usage with React
-sidebarDepth: 0
----
-
-# Usage with React
-
-> ### In this tutorial your will learn how to use MoJS in React using React's Hooks API.
-
-#### Author: [Jonas Sandstedt](https://twitter.com/jonassandstedt)
-
-[Fork example on CodeSandbox](https://codesandbox.io/s/mojs-react-example-kbikb?file=/src/MojsExample.js)
-
-::: tip TLDR;
-Assign your animation to an `useRef` immutable object inside a `useEffect` hook. Then you can use this ref to control the animation, like this: `myRef.current.play()`
-:::
-
----
-
-## Install packages
-
-Start by installing React, ReactDOM and @mojs/core from your favorite package manager. Here we use npm:
-
-```bash
-npm i react react-dom @mojs/core
-```
-
-## Create the animation component
-
-Here is the final component that we're gonna build:
-
-```js
-import React, { useRef, useEffect, useState, useCallback } from "react";
-import mojs from "@mojs/core";
-
-/**
- * Usage:
- * import MojsExample from './MojsExample';
- *
- *
- */
-
-const MojsExample = ({ duration }) => {
- const animDom = useRef();
- const bouncyCircle = useRef();
- const [isOpen, setIsOpen] = useState(false);
- const [isAnimating, setIsAnimating] = useState(false);
-
- useEffect(() => {
- // Prevent multiple instansiations on hot reloads
- if (bouncyCircle.current) return;
-
- // Assign a Shape animation to a ref
- bouncyCircle.current = new mojs.Shape({
- parent: animDom.current,
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: duration,
- isShowStart: true,
- easing: "elastic.inout",
- onStart() {
- setIsAnimating(true);
- },
- onComplete() {
- setIsAnimating(false);
- },
- });
- });
-
- // Update the animation values when the prop changes
- useEffect(() => {
- if (!bouncyCircle.current) return;
- bouncyCircle.current.tune({ duration: duration });
- isOpen
- ? bouncyCircle.current.replayBackward()
- : bouncyCircle.current.replay();
- setIsOpen(!isOpen);
- }, [duration]);
-
- const clickHandler = useCallback(() => {
- // If the "modal" is open, play the animation backwards, else play it forwards
- isOpen ? bouncyCircle.current.playBackward() : bouncyCircle.current.play();
- setIsOpen(!isOpen);
- }, [isOpen]);
-
- return (
-
-
-
MoJS React Example
-
Using hooks
-
-
-
- );
-};
-
-export default MojsExample;
-```
-
----
-
-### Let's break it down!
-
-First we create a `useRef` hooks, and takes advantage of its immutable object and assign our MoJS `Shape` animation to it. This way we can later use it to control our animation:
-
-```js{2,5}
-const MojsExample = () => {
- const bouncyCircle = useRef();
-
- useEffect(() => {
- bouncyCircle.current = new mojs.Shape({
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: 1000,
- isShowStart: true,
- easing: "elastic.inout",
- });
- });
-
- return;
-};
-```
-
-By checking if the ref already has been assigned, we can prevent the animation from being instantiated again on re-renders (very useful when using hot reloads):
-
-```js{5}
-const MojsExample = () => {
- const bouncyCircle = useRef();
-
- useEffect(() => {
- if (bouncyCircle.current) return;
-
- bouncyCircle.current = new mojs.Shape({
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: 1000,
- isShowStart: true,
- easing: "elastic.inout",
- });
- });
-
- return;
-};
-```
-
-To get the reference to DOM element we want to append our animation to, we can use a `useRef` hook, and attach it to a container:
-
-```js{3,9,21}
-const MojsExample = () => {
- const bouncyCircle = useRef();
- const animDom = useRef();
-
- useEffect(() => {
- if (bouncyCircle.current) return;
-
- bouncyCircle.current = new mojs.Shape({
- parent: animDom.current,
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: 1000,
- isShowStart: true,
- easing: "elastic.inout",
- });
-
- bouncyCircle.current.play();
- });
-
- return ;
-};
-
-export default MojsExample;
-```
-
-Now lets add a button to play the animation when we click it. To control the animation, we can now reference the MoJS animation using `bouncyCircle.current.play();`
-
-```js{19-21,25-27}
-const MojsExample = () => {
- const bouncyCircle = useRef();
- const animDom = useRef();
-
- useEffect(() => {
- if (bouncyCircle.current) return;
-
- bouncyCircle.current = new mojs.Shape({
- parent: animDom.current,
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: 1000,
- isShowStart: true,
- easing: "elastic.inout",
- });
- });
-
- const clickHandler = useCallback(() => {
- bouncyCircle.current.play();
- });
-
- return (
-
-
-
- );
-};
-
-export default MojsExample;
-```
-
-::: tip
-If we instead would want to play our animation directly, we could add `bouncyCircle.current.play();` directly after the bouncyCircle declaration.
-:::
-
-By passing props to our `MojsExample` function, we can control the initial values of the animation, and also `.tune()` the animation when they change.
-
-```js{7,19,25-29}
-/**
- * Usage:
- * import MojsExample from './MojsExample';
- *
- *
- */
-const MojsExample = ({ duration }) => {
- const animDom = useRef();
- const bouncyCircle = useRef();
-
- useEffect(() => {
- if (bouncyCircle.current) return;
-
- bouncyCircle.current = new mojs.Shape({
- parent: animDom.current,
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: duration,
- isShowStart: true,
- easing: "elastic.inout",
- });
- });
-
- useEffect(() => {
- if (!bouncyCircle.current) return;
- bouncyCircle.current.tune({ duration: duration });
- bouncyCircle.current.replay();
- }, [duration]);
-
- const clickHandler = useCallback(() => {
- bouncyCircle.current.play();
- });
-
- return (
-
-
-
- );
-};
-```
-
-As a final touch, lets add some methods to listen animation events, and use Reacts useState to save it as a local state:
-
-```js{4-5,18-23,30-33,38-40,45}
-const MojsExample = ({ duration }) => {
- const animDom = useRef();
- const bouncyCircle = useRef();
- const [isOpen, setIsOpen] = useState(false);
- const [isAnimating, setIsAnimating] = useState(false);
-
- useEffect(() => {
- if (bouncyCircle.current) return;
-
- bouncyCircle.current = new mojs.Shape({
- parent: animDom.current,
- shape: "circle",
- fill: { "#FC46AD": "#F64040" },
- radius: { 50: 200 },
- duration: duration,
- isShowStart: true,
- easing: "elastic.inout",
- onStart() {
- setIsAnimating(true);
- },
- onComplete() {
- setIsAnimating(false);
- },
- });
- });
-
- useEffect(() => {
- if (!bouncyCircle.current) return;
- bouncyCircle.current.tune({ duration: duration });
- isOpen
- ? bouncyCircle.current.replayBackward()
- : bouncyCircle.current.replay();
- setIsOpen(!isOpen);
- }, [duration]);
-
- const clickHandler = useCallback(() => {
- // If the "modal" is open, play the animation backwards, else play it forwards
- isOpen ? bouncyCircle.current.playBackward() : bouncyCircle.current.play();
- setIsOpen(!isOpen);
- }, [isOpen]);
-
- return (
-
-
-
- );
-};
-```
-
----
-
-## Create the root App and render the page
-
-Finally we import our component and add it to the root of our site.
-
-```js
-import React from "react";
-import ReactDOM from "react-dom";
-
-import MojsExample from "./MojsExample";
-
-const rootElement = document.getElementById("root");
-ReactDOM.render(
-
-
- ,
- rootElement
-);
-```
-
-You can see the full example and try it out here: [CodeSandbox](https://codesandbox.io/s/mojs-react-example-kbikb?file=/src/MojsExample.js).
-There is also a [button example](https://codesandbox.io/s/mojs-react-example-kbikb?file=/src/Button.js) with a `Burst` animation using an object pooling array.
-
-::: tip Usage with Server Side Rendering (SSR)
-
-Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the `useEffect` hook or a dynamic import ([read more here](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)).
-:::
-
-Happy animating!
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..e5a0feb9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ mo.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The MojsCurveEditor depends on mojs >= 0.225.2, tween autoupdates available for mojs >= 0.276.2. Please make sure you've imported mojs(opens new window) library first.
The name is used to
+identify record in localStorage to restore the state from
+when page gets reloaded, so please specify unique names if
+you use more than one editor on the same page.
After that you can "connect" the curve with your mojs modules by passing a "sample" of the curve to the easing property of the module, like this:
Each tween/module should have it's out sample of the curve, this means you need to call myCurve.getEasing() send the sample of the curve to the easing property of modules.
If you use mojs>0.276.5 the state of the modules with the curve sample will be updated automatically.
The getEasing function receives options hash:
easing: myCurve.getEasing({
+ // `transform` function that pipes through the current value
+ // of the curve so you can transform it
+ transform:(k)=>{return k;}
+ });
+
+
After you are happy with the curve you made, you need to change the sample (the myCurve.getEasing() call) with the actual path data which you can get by clicking on the code button ( ):
const curveEditor =newMojsCurveEditor({
+ // name of the curve editor
+ name:'bounce curve',
+
+ // if should preserve state on page reloads
+ isSaveState:true,
+
+ // start path - will be loaded on initialization of the curve,
+ // e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
+ startPath:'M0, 100 L100, 0',
+
+ // callback on path change, accepts path string
+ onChange:function(path){},
+
+ // if should hide when minimized - useful when you try to embed
+ isHiddenOnMin:false
+});
+
Please make sure you are comfortable with Shapes & ShapeSwirl before proceeding with this tutorial. Understanding those modules is crucial for understanding the Burst.
Burst is a higher order module that creates sophisticated visual effects in any part of the screen you want. You can think of Burst as a particle emitter that composes a bunch of ShapeSwirl's together, creating a circle of particles.
Just like with Shape, mojs takes care about all bootstrapping work, creates as narrow container for the burst as possible and positioning the effect for you.
From the technical point of view, Burst is just a main ShapeSwirl that holds a bunch of child ShapeSwirl's. Pictorially it looks like this:
The main swirl has no shape nor any presentation properties and in fact, is 0 size by default completely unreachable for user's interaction pointer.
Another important note is that radius property (and radiusX/radiusY ones) has different meaning - it controls the radius of radial shape of particles:
There are few more properties that Burst implements over ShapeSwirl to control the radial shape behavior that particles compose. The first one is the count property that sets the amount of particles:
Here above, we have a burst that has 30 degrees of sufficient place for particles.
It is very important to note here that since the main swirl of Burst module has no actual shape - it has no style attributes that define shape's presentation - all of them among which are the stroke or strokeWidth or fill are completely useless.
Also, the main swirl of the burst have no tween related properties like delay or duration, the later one gets computed automatically regarding the duration of the particles.
Nonetheless, all properties that control shape position, parent and opacity are present:
To recap, the main swirl of the Burst has no style attributes because it has no shape, furthermore it has no tween related properties like duration which is computed from the particles duration. But Burst has all the other properties, most of them regarding position, opacity, parent etc. You can always use the Burst API as the reference.
But Burst won't be much interesting unless we can control child particles, right?
I have some good news for you - you already know Burst's syntax! Confusing claim? Nah! If you are familiar with Shape and ShapeSwirl modules - you know the Burst. That's because the Burst is nothing than just a ShapeSwirl that holds child ShapeSwirls, remember? This means you can put any property of ShapeSwirl to the children object, go try:
Actually Burst gives you even more control over each child, allowing you to specify property for each of them explicitly. These two techniques are called Stagger Strings and Property Maps.
The first parameter in stagger function is the start value, all subsequent steps will be added to that start value, that is optional; If you just write stagger(25), it will mean to stagger with step of 25, starting from 0.
In the demo above, that's exact the same circle as in the demo before, but we have staggered the delay property so it looks rather spiral now.
Every numeric value can be expressed with stagger stings. Also, they can contain randoms (see the delay property in children):
Property Map was designed to express sequential values. You can use it to generate values that repeat over and over but are mapped to children length. Basically, it is just an array that maps its values to children regarding child index with mod function. So if you have a property map with 3 values and burst has 5 children, then the 4th and 5th items will receive the 0th and 1st values from the map respectively:
So starting from 12 o'clock clockwise, the 5 childrens fill properties get values of deeppink, cyan, yellow and then again starting from the beginning of the property map - deeppink, cyan ( [0],[1],[2],[0],[1] ).
Property maps work with any property and property forms, in fact, that's just a prism (or multiplexer) that feeds children with properties by virtue of modulus function. Good aid if you want to set some property on child explicitly.
You can make then state chains, tune and generate any Burst the same as you do with Shape or ShapeSwirl. Also, since the Burst is merely a ShapeSwirl under the hood, you can use any tween interface public method like play, setProgress, replay etc (click somewhere to see):
That's basically the burst, as I said you already know it so we won't go thru the children options again, instead, let's jog thru some use cases in the next section which will help as to gain some intuition over where and how to use the bursts. As you remember, - Burst is just a composition of a bunch of ShapeSwirls. There is the main swirl in the center of the burst but it has no visual shape. Also, it has no tween properties and its durations is calculated regarding the duration of the children. All child swirls use the main one as a parent. You can set properties of children with the appropriate property. Please, use the Burst API as the reference.
Please note that the use cases section contains a lot of live code examples but the actual code samples are omitted for time savings and simplicity sake. The actual code is still available on the Babel tab of the pens and I highly encourage you to read through and play with them while we will walk through this section. You can omit reading large demos code since it is probably unreadable (some Codepens can contain bundled code) or it could be too large to understand sparingly, but you can return to them later. I will leave a little (×) mark for you to indicate that you can skip reading the source code of the Codepen for now.
Burst, in similarity with Shape or ShapeSwirl, has numerous application fields, among which are motion graphics and UI-animations. In contrary to the Shape & ShapeSwirl tutorial, I won't split use cases to different entities but rather will try to do lot's of small demos, each with explanation comments. Hang tight!
Micro Animations
The first thing that comes to mind when I see the default burst - is the famous Twitter's fav animation(opens new window). Animations like that are usually called micro animations but I've used to call them micro celebrations because of their festivity.
Anyways, sequences like that are a cinch when you have the burst module in your hands. Here's how to do the main part of the sequence (click anywhere to see):
Here above, we have declared a burst with 5 particles (which is by default) with a burst's radius transition from 4 to 19. There are 2 strategies for bursts like that - one is to scale children down (by default), the second one is to animate strokeDashoffset on children which we have used here.
The next step is to add two more shapes to the scene - one circle with strokeWidth animation and a custom one - the star with elastic.out transition for the scale(click anywhere to see):
I love using the burst module over sprites because it turns out to be a way flexible over pre-rendered sequence of images, - you can play with easings, time, delay, colors etc. Also, you can even change shapes with no effort at all - for instance, if you want to add stars instead of lines (click anywhere to see):
The catch here is to use the in easing for scale property and the opposite out easing for particles position. Also, we have set the pathScale slightly smaller for "inner" particles. After that, we have defined a small degreeShift for each odd / inner particle. Then null value in the properyMaps mean that it takes the default value. For scale it's 1 and in degreeShift it's 0.
The next step is to add the circle shape and heart animations, almost identical to ones we have used in the Twitter fav scene (click anywhere to see):
In the example above we didn't use the Burst module that much. But you can imagine that those effects are much easier with the Burst module. For instance the bubbles in the first part could be made like this:
Here we have the static radius of 25 on burst and 3white particles. We've set a slightly random degreeShift and a delay on the children that eventually gives us the bubble like motion.
As you can see, the second burst is almost the default one, we have only changed the main radius to 0 : 30. As for children, we tweaked the shape to a line value, and made the scaleX to fade out from 1 to 0.
The final touch is to add center circle and cross shapes:
The second part - the bubble fadeout effect is even simpler. For the Burst module, we just need to set degree to 0 so the particles will flow in one direction, then set isSwirl to true (Burst composes ShapeSwirls, remember?) on children thus particles will follow sine path. After that we need to slightly randomize swirlSize, swirlFrequency and pathScale parameters (click somewhere to see):
+ Note that the demo was made a while ago so it contains deprecated syntax.
+
How many burst modules have you noticed in this demo? There are quite some actually. I think the most noticeable are collisions with the ground (click to see):
Hm, they kind of overlap, so let's shift them by staggering left and top properties on children, after that let's add some delay with help of property map:
As you can see, we've set the main swirl's radius and degree to 0 to put the child shapes in the one spot. Then we just have to slightly stagger delay on children.
The same technique for the other parts - vertical and horizontal lines:
Let's move on. What else we can do with Burst? We can blast things up. I love blasting things up, do you? Recall this demo from the Shape & ShapeSwirl tutorial(×):
Notice how we use pathScale and degreeShift properties to add randomness to the blast. The pathScale property defines how the length of the particle's path scales. The degreeShift property defines how much the particle will shift in its radial position in burst circle shape. So if a particle has degreeShift of 90, it will be shifted in radial shape by 90 degrees. Since pathScale and degreeShift both have random values and we generate the module on each user click - we always have the random blast pattern.
Let's add more details to the blast, for instance, another burst with large geometric shapes:
Yum. I hope you love to blast things up too now. Notice we did it without a single repaint!
Modal blast
If you recall the next old demo, you probably can say now how it was made. How many modules does this blast compose (click close to see the effect) (×)?
The effect is a bit more modest than the previous one. As you can see, I haven't recreated exactly the same sequence here, but rather made a slightly different one.
The sleepy mole
OK. Enough distraction. Let's create something less straightforward. Recall this demo with the mole (×):
Can you count how much effects are bursts here? There are quite a few. The most noticeable is the effect that appears after the door shuts down - the 4 spots of dust. This one was composed with 4 bursts (one for each corner), let's start with just one for now:
How is it possible? Remember that the Burst composes ShapeSwirls, not simple Shapes so, if we set isSwirl to true, we will have sine paths. This is how you do 4 at once (click to see):
The main catch here is to mimic the air flow by rotating the main swirl backward slightly. Then you have to create more bursts, each one is smaller than previous one and each of them should have a smaller delay.
What else have you noticed in the mole demo? Yep saliva that comes from the mole mouth when it teases. First, you want to make 0-degree burst, and rotate the main swirl downward, imitating that the air current which comes out of his mouth gets weaker:
Now instead of multiple swirl modules which we have been using in the previous tutorial, we use just one burst - stagger expressions turn out to be useful! After that you want to create an overflow: hidden container and assign it as parent to the burst:
That's exact the same effect as we have made in the Shape & ShapeSwirl tutorial, but this time with just 2 Bursts! Bursts are fun, there is a little demo I've made with this dust trail effect (click to see):
That's it for Burst. We've touched only the surface of the possible effects that you can compose with this module, but that's a good start to convey the idea and APIs. Also, my friends from Codrops(opens new window) wrote an awesome post(opens new window) a while ago on the Burst matter, definitely check it out.
Burst is the module that helps you to craft sophisticated motion effects with simple declarative calls. Technically, it is the main ShapeSwirl that composes a bunch of child ShapeSwirls forming the radial shape by default. mojs takes care about all markup bootstrapping and positioning of the module for you. The main swirl has no shape thus no presentation properties. The duration of the main swirl is calculated regarding duration of the child swirls. To control child swirls, pass the ShapeSwirl properties to the children property of the main swirl. You can find exhaustive API reference at Burst API section.
Burst is indeed an interesting module but, please don't overuse it. Your intention should be to guide and cheer users but not overwhelm them. Be cautious and think twice, if you feel that anyhow the effect you've done makes a visual noize rather than helps to solve a real problem, skip it entirely.
I'm happy you've made it here! It was a long and intense journey, I hope you don't feel overwhelmed. I also humbly hope that these effect modules will come handy to you on your web development route. There are some more "effects" modules that will land to the mojs shortly so stay tuned. For any questions, catch me on Twitter @legomushroom(opens new window), ask a question on StackOverflow with #mojs tag, rise an issue on the GitHub repo(opens new window). You can help the project on GitHub(opens new window). {'Love ❤️.'}
Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the useEffect hook or a dynamic import (read more here(opens new window)). For Angular Universal you can use Guards (read more about it here(opens new window)). Lastly if you use Vue with Nuxt.js, you will find more info here(opens new window), or info about using the mounted hook here(opens new window).
Also see tutorial on how to use MoJS inside a React app here.
Shape is a special mojs module that bootstraps visual effects. The idea behind Shapes is simple and neat - you can have an animatable shape in any part of the screen or an HTML element with one declarative call. So it's like saying:
Hey Computer! I want a pink outlined polygon right in the middle of the screen!
or like something this:
Hey Machine! I want a dust trail after this element when it moves!
And appropriate effects should appear. Most importantly, Shape is a tiny bit that can be composed into more mature modules like Burst or Stagger which we will discuss shortly in the upcoming tutorials, right now I should make sure you are comfortable with Shape APIs and use cases.
So in the simplest way - Shape is just a declarative shape transition in any desired place of the screen in any moment of the time. The concept can be confusing at first, so I will try to give you as much code samples as possible, there is the first one:
Nothing interesting yet. Well maybe there is one thing - the shape magically appears just in the middle of the screen. mojs takes care to create as narrow container for the shape as possible, bootstraps all the markup and places the result just where you want it. Pretty handy. isShowStart property says to the shape to be visible even before any animations starts.
Obviously, you can style the shape as you want (play around with the different props and use the buttons to update the code):
newmojs.Shape({
+ parent:'#circle',
+ shape:'circle',// shape 'circle' is default
+ radius:25,// shape radius
+ fill:'transparent',// same as 'transparent'
+ stroke:'#F64040',// or 'cyan'
+ strokeWidth:5,// width of the stroke
+ isShowStart:true,// show before any animation starts
+});
+
The entire list of shape properties with comments could be found at Shape API section.
When you set colors, they can be expressed in different forms like color keywords(opens new window), rgb, rgba or hex (see stroke and fill properties).
Numeric properties may be unit based (like top/left below) or can be expressed with rand strings (like x below):
Use the Update code button to see the random function in use.
Here above, we've set random value for the x property in the interval from -250 to 250 so it should show up in random position inside that period every time you will rerun the code. rand string syntax is simple - it takes start and end value to generate a random value between those two.
With the x and y properties, the shape is always translated from the current position of the shape, so if the x property gets the value of 250px, the circle's gets translated 250px to the right.
Worth noting that the radius property is a property that determines size of any shape, not just circle as in example above, so if you have a shape of rect or polygon or any other, they would have radius properties too, just like a circle shape:
We have set transition for the scale property of the shape from 0 to 1. As you can see the delta in mojs is plain javascript object that holds start and end state of the property, where the key of the object is the start state and value of the object is the end state respectively. If you still feel confused, just change : to -> in your mind and you will have { '0 -> 1' } outcome which might be more intuitive.
TIP
To play the animation, add the .play() method after your shape declaration. For simplicity, we have left that one out for most of the other examples. For other public methods, check out the API.
Start and end values in the delta object can be unit based or random (rand) ones or whatever you have — just the same as we did it before with static values (all objects in the code sample below are deltas):
Here, delta of the strokeDashoffset property on the rectangle uses unit based values. The delta of the x property of the polygon shape uses random unit based values. The delta of the fill property for all the shapes uses color keywords to describe color transitions.
The nice thing about declarative APIs is that you define what you want to do by contrast with how to do it, so it makes the intention of the transition crystal clear with just one short glimpse. Consider this code sample of a trirotate:
If you will translate this code sample to proper English, you will have something like this — we have a orangepolygon of 65px radius right in the middle of the screen(by default), when animation starts — it rotates from -120 to -40 degrees, shifts 180px to the right starting from -200px and scales from 0 to 1.3 concurrently. That happens during 800ms and repeats 10 times with default easing and sin.in easing when moving backward in yoyo period. When animation ends, the shape disappears.
Note that almost every property transition besides tween properties (like duration/delay etc) and boolean values, can be expressed with delta object, please refer to the API on that matter. The ∆ symbol in the comment right above properties defines that the property is "deltable" thus supports delta transitions.
Delta can also have its own explicit easing field that can hold any mojseasing type, this makes shape transitions more flexible to the real world needs.
The 3rd property that is available on delta objects is curve property that overrides easing property if both present. The curve property is the way to go if you want to declare a property curve for a property transition, where start and end values of the delta are based on a curve, that will be multiplied by current curve's value when animation runs:
We won't spend a lot of time with property curves in this tutorial, but I highly encourage you to dig into the topic because it is a very sophisticated and powerful concept to note.
So to recap, delta's syntax:
{
+ startState: endState,
+ easing:'cubic.out',// optional `easing`,
+ curve:'M0,100 L100,0'// optional `curve` that suppress `easing` if both present
+}
+
In the demo above, I've added MojsPlayer to control the demo sequence instead of explicit .play call on the shape. MojsPlayer is part of mojs tools that gives you GUI controls thus helps you to craft your motion sequences. Also, it keeps the animation state and settings on page reloads, saving you lots of time and effort. Since our animations can get quite complex, the player could be a good aide. Read more here how to use it.
So in the demo above, we have continued the sequence with the next state declaration for the strokeWidth and scale properties. What's important - then doesn't need delta to describe new transition - it creates delta automatically from whatever property value was before to the new one.
If you want explicitly specify easing for next property state - you can use object instead of primitive value, where to key describes the next state ( see scale property in then call above).
Yet you can set entire new delta for then call (see strokeWidth and stroke property in then call below):
As you can witness, setting new delta in then call tells mojs to ignore everything whatever was before and proceed with completely new delta transition.
The last thing to note is that if the duration property is not set in the new then call, it inherits the value from the previous block:
newmojs.Shape({
+ parent:'#duration',
+ shape:'rect',
+ fill:'none',
+ stroke:'cyan',
+ radius:10,
+ strokeWidth:20,
+ rotate:{[-180]:0},
+ top:'50%',y:-20,
+
+ duration:600,
+ delay:200
+}).then({
+
+ // duration here will be 600 too because inherited from the previous block
+ // delay here will have default 0 value
+
+ rotate:-360,
+ scale:2,
+ strokeWidth:0,
+ stroke:{'magenta':'yellow'}
+});
So in the code sample above, the duration inside then call has the same value of 600ms inherited from the previous state block, but the delay has the default value of 0.
After you have created a shape, you can tune any of its properties before starting the animation. The tune method is handy when you want to add some interactivity to your animation or to play the shape regarding user input - the method was designed exactly for this purpose(click somewhere to see):
Here above, we have tuned x and y properties of the circles before replaying it. Any properties besides shape ones could be tuned at any moment of time.
Note that tune call transforms entire shape's property query that was set up with then calls. It works that way to keep the chain up to date starting from the newly tuned value. Thus you tune not only the first shape state but the subsequent ones. For instance, if you had a chain of y -50 -> 50 then 100, and tune it to -100, you will eventually have -150 -> -150 -> 100 chain. But if you will tune to delta value like -100 -> 0, you will have the -100 -> 0 -> 100 chain as the result (click somewhere to see):
const circle =newmojs.Shape({
+ y:{[-50]:0},
+}).then({
+ y:100
+});
+
+document.addEventListener('click',function(e){
+
+ // no tune
+ circle1
+ .replay();
+
+ // static value tune, results in -100 for the first block,
+ // transforms the second block to the '-100 -> 100' delta
+ circle2
+ .tune({y:-100})
+ .replay();
+
+ // delta tune, results in -100 : 25 for the first block,
+ // transforms the second block to the '25 -> 100' delta
+ circle3
+ .tune({y:{[-100]:0}})
+ .replay();
+});
+
1st circle wasn't tuned at all, 2nd circle was tuned to static value, 3rd circle was tuned to new delta value
The generate method is very similar to tune one, but it doesn't receive any options. The method was designed to regenerate randoms that the shape had on initialization:
Here above, shapes had randoms in delay, x, y and radius properties. Then we've added the mouse click handler, and generate the shapes inside, as the result, we have unique effect pattern every time the click event fires. See full code here.(opens new window)
You probably have noticed that mojs supports a bunch of built in shapes. Namely, they are circle, rect, polygon, line, cross, equal, curve and zigzag. You can extend this set of shapes by providing mojs with a custom one that suits your needs. For that:
Draw your shape on a 100x100 artboard (viewBox) in any vector editor and save the shape as a svg.
Create a class that extends the mojs.CustomShape class.
Now you can register this shape in mojs with a custom name that will be used further in shape property of mojs.Shape constructor as you did it before:
mojs.addShape('bubble', Bubble );// passing name and Bubble class
+// now it is avaliable on mojs.Shape constructor as usual
+newmojs.Shape({shape:'bubble'});`
+
All together in one block:
/* ADD CUSTOM SHAPE SOMEWHERE IN YOUR CODE */
+classHeartextendsmojs.CustomShape{
+ getShape(){return'<path d="M92.6 7.4c-10-9.9-26-9.9-35.9 0l-4.4 4.3a3.4 3.4 0 0 1-4.7 0l-4.3-4.3c-10-9.9-26-9.9-35.9 0a25 25 0 0 0 0 35.5l22.4 22.2 13.5 13.4a9.5 9.5 0 0 0 13.4 0L70.2 65 92.6 43a25 25 0 0 0 0-35.5z"/>';}
+ getLength(){return200;}// optional
+}
+mojs.addShape('heart', Heart );// passing name and Bubble class
+
+/* USE CUSTOM SHAPE */
+// now it is available on mojs.Shape constructor as usual
+const heart =newmojs.Shape({
+ shape:'heart',// <--- shape of heart is now available!
+ fill:'none',
+ stroke:'red',
+ scale:{0:1},
+ strokeWidth:{50:0},
+ y:-20,
+ duration:1000,
+});
+
Worth noting that you should remove all presentation attributes from svg tags to give mojs the ability to style them, otherwise the values will be static:
/* ADD CUSTOM SHAPE */
+classHeartextendsmojs.CustomShape{
+ getShape(){
+ return''+''+'';// see full code here: https://codepen.io/sol0mka/pen/d2be0ef912c7e21e0e990536ed6d39fa
+ }
+ getLength(){return200;}// optional
+}
+mojs.addShape('heart', Heart );// passing name and Bubble class
+
+/* USE CUSTOM SHAPE */
+// now it is available on mojs.Shape constructor as usual
+const heart =newmojs.Shape({
+ shape:'heart',
+ fill:'none',
+ stroke:{'white':'deeppink'},
+ scale:{0:1},
+ strokeWidth:{50:0},
+ y:-20,
+ duration:1000,
+});
+
Here above, the middle heart has static stroke property on its tag, so it was left unattended by contrast with other two.
Regarding the second getLength lifecycle method, - it is handy only if you want to use relative percent values for strokeDasharray/strokeDashoffset properties. Since mojs knows very little about the custom shape you have had provided, it is on you to specify what is the perimeter length of the custom shape. In the example below, we return the precise 292.110107421875 length of the heart from the getLength method, this allows us to use percent values in strokeDash* properties.
/* ADD CUSTOM SHAPE */
+classHeartextendsmojs.CustomShape{
+ getShape(){return'';}// see full code here: https://codepen.io/sol0mka/pen/75894cd43b0f12ecdb425cad5149ab37
+ getLength(){return292.110107421875;}// optional
+}
+mojs.addShape('heart', Heart );// passing name and Bubble class
+
+/* USE CUSTOM SHAPE */
+// now it is available on mojs.Shape constructor as usual
+const heart =newmojs.Shape({
+ shape:'heart',
+ fill:'none',
+ stroke:'white',
+ strokeDasharray:'100%',
+ strokeDashoffset:{'-100%':'100%'},
+ y:-20,
+ duration:1000,
+});
+
Here above, we are using percent values for strokeDashoffset property so we had to provide the custom shape with getLength method for precise stroke dash length calculations. Read how to find out what the exact length is in the Wiki(opens new window).
ShapeSwirl module basically is a Shape with a little bit more functionality bolted on. ShapeSwirl automatically calculates sinusoidal x/y path for shape making it easy to send the shapes over sine trajectories.
Note that the ShapeSwirl has the default of { 1 : 0 } for the scale property so it fades out.
To trigger the animation we have added a click event listener to the container and then run shapeswirl.replay().
To give you control over this behavior, ShapeSwirl accepts more 6 properties, thus you can define frequency or size of the path and other supporting parameters:
const shapeSwirl =newmojs.ShapeSwirl({
+ y:{0:-150},
+ // other props:
+ isSwirl:true,// sets if the shape should follow sinusoidal path, true by default
+ swirlSize:10,// defines amplitude of the sine
+ swirlFrequency:3,// defines frequency of the sine
+ pathScale:'rand( .1, 1 )',// defines how much the total path length should be scaled
+ direction:1,// direction of the sine could be 1 or -1
+ degreeShift:45,// rotatation shift for the sinusoidal path
+});
+
The direction property (1 by default) defines direction of the amplitude of the sine - it have value of either 1 or -1. Here is the example for -1. Note how it starts to the left instead of right:
The pathScale property (1 by default) defines the scale size of the sine path. Here is an example of pathScale: .5 - which scales the sine by half (of the original radius):
You are probably thinking - why not just to shorten the y value instead of pathScale one? Well, because the pathScale scales the actual path of the swirl, for instance if you will add the transition for the x property, the path scale will affect the product of y and x - the actual path that the shape makes while move:
The pathScale property will become very useful when we will discuss the Burst module shortly and will have a bunch of ShapeSwirls at once, especially when we will need to randomize their sine lengths.
The degreeShift property (0 by default) defines rotatation of the swirl. This property becomes interesting when shapeSwirl is used inside other modules (like Burst). For now it will act just like rotatation of the sine path. Here is an example for degreeShift: 90:
How ShapeSwirl can be handy will be cristal clear soon, in short, the main idea behind swirls is to give you the ability to compose dust/smoke/bubbles effects or basically any effect that needs shapes to move over sine path:
That was a pretty fast intro to the Shape module. You can use Shape APIs and ShapeSwirl API sections as reference further on. What is important ro remember:
You can create a Shape in any part of the screen, or an HTML element using the parent prop.
If you want to animate some property — you add a delta object ({'from': to}) that describes the transition of that property.
You can chain the shape transitions with then calls and tune new properties when you want.
Tweenable interface allows you to work with Shape in the same way you work with any other Tween.
Now you probably asking yourself - Why do we need something as simple as an animatable shape? In the next section I will cover few use cases for shapes but most importantly it will become crystal clear why do we need shapes in the next Burst Tutorial. Probably, you can treat this tutorial as finished at this point, the further sections are rather optional and were written just for fun. So you can skip reading them in favor of Burst Tutorial but I highly encourage you to continue reading to gain solid understanding of the shapes.
Please note that the use cases section contains a lot of live code examples but the actual code samples are omitted for time savings and simplicity sake. The actual code is still available in the Codepen link and I highly encourage you to read through and play with them while we will walk through this section. You can omit reading large demos code since it is probably unreadable (Codepen can contain bundled code) or it could be too large to understand sparingly, but you can return to them later, - after you will complete this tutorial. I will leave a little (×) mark for you to indicate that you can skip reading the source code of the Codepen for now.
Despite the fact that Shape and ShapeSwirl modules are nothing than tiny bits that compose higher order modules creating some matured effects, they have strong use cases and can be used on their own. There is no thing in the whole world such expressive and appealing as simple geometric shapes so they are ubiquitous in the motion graphics nowadays. You can use shapes in your animations to add special effects and details making your animation more expressive. Also, Shapes are often used to implode them into UI thus enhancing it. From the development point of view — Shape can be created with just one declarative call allowing you to focus entirely on you motion sequences and don't spend the time bootstrapping things, this fact powers you with a "shape framework" to think in, so your motion sequences get more organized and consistent.
I hope you don't believe that Shapes are useful just because I claimed it out loud, so let me convince you with the next real world use cases. Note that the code samples are omitted in this section but feel free to check Codepen link to tweak the part that interests you.
Motion graphics is indeed one of the strongest use cases for Shapes. Nothing breathes life into static content better than the use of motion graphics. With shapes, the limits are simply the imagination of the designer or the artist, - you can create complex mograph sequences based entirely on geometric or custom shapes or use them aside as reinforcement support.
Custom shapes allow you to use shapes that suite your current needs. To be clear that's not just images that you can animate inside some wrapper, they are highly styleable shapes thus a way flexible than just an image or HTMLElement with some background.
Let's walk through some short random geometric scenes just to get some intuition about shape usage with mograph. After that, we will combine them to get slightly longer intro sequence.
We will start with a simple and appealing triangles scene. Just 6 triangles and few then statements:
Note that the best module to use for the white sparks effect on the sides of the square would be the Burst module which we will discuss shortly in the next tutorial. Meanwhile in this particular demo, it was made with custom shapes to give you yet another clue how you would use the custom shapes.
After that we need a nice transition between screens, just a few circles will do the trick:
When making fullscreen transitions, make sure to include a chech for if the user preferes reduced motion. We don't wanna trigger a migrane attack for our user. For example, you can play the animation from the end instead of frame 0, to ensure the last frame will be visible:
let prefersReducedMotion =false;
+const motionQuery =matchMedia('(prefers-reduced-motion)');
+consthandleReduceMotionChanged=()=>{
+ prefersReducedMotion = motionQuery.matches;// set to true if user preferes reduced motion
+}
+motionQuery.addListener(handleReduceMotionChanged);
+handleReduceMotionChanged();// trigger once on load to check initial value
+
+this.timeline.play(
+ prefersReducedMotion ?1000:0;// 1000 = the length/end of the timeline
+);
+
+ There is another demo that can set some light on the shape usage in motion
+ graphics, it was made with bunch of shapes and few characters that compose
+ a love word
+ together:
+
You can find the entire source code in this repo(opens new window) since the bundled Codepen code could be unreadable.
The demo itself is a good illustration of how you can use shapes as "main actors" in your scenes because it was made entirely with shapes. But there are few cases that should be discussed besides that.
For instance, you can add the effect of collision between balls with ease(x):
You can find the entire source code in this repo(opens new window) since the bundled Codepen code could be unreadable.
Motion trail effect is usually used to exaggerate velocity of the object that moves and the environment it moves in. Just a nice subtle detail. The effect was composed of 2 shapes, namely curves.
There is another simple example with lines instead of curves:
You can find the entire source code in this repo(opens new window) since the bundled Codepen code could be unreadable.
It was composed of bunch of swirls, let's spend some time and see how exactly you can build something like that. First, you want to make the swirls move downward, - somewhere into the ground:
Note: Again, this dust effect could be done with just one declarative call with Burst or Stagger modules that we will discuss shortly, but for now let's keep it Swirl.
That's basically all for animation use cases. My effort in this section was focused to convey the idea of how you can use the shapes to enhance and support your main animation scenes, applying little effects and details.
The next demo illustrates how the shapes can be used to appeal users' attention, providing them with feedback about availability of the control element in a playful way. There is a demo with two shapes that act in place of UI element:
That's the exact same effect I've used in Bubble Layout demo a while ago, when I was trying to convey the bubble interface (click on any circle to see the close button)(x):
In this demo above you can notice two more effects that were made with shapes, - one is the subtle white ripple that spreads out when you click on any bubble (click somewhere to see):
Another demo for micro interactions is the pointer ripple, the effect that spreads out after a user clicks any touchable surface. The mojs-player itself has a lot of those so I will put an empty player as demo (click on player controls to see):
OK. Let's do another demo with shapes regarding UI. This time, we will have a plus button, it will show up from bottom left, after it will stop - we will mimic button push transition by adding the concurrent rotation of the button. By that we will imitate "let's go/follow me" gesture, inviting user to follow up with a click:
When the user eventually will click the button, we will show the quiz modal with the most valuable question we have ever had. That's how the modal will look like:
Every piece of this sequence above is composed of shapes - ripple inside a modal, few details in the top and bottom right corners, background spread effect, modal shape itself and its corner are shapes too.
Now when the user hovers over any button, we need to show some tension, conveying that something is going to happen if he will proceed with a click (hover over buttons to see):
The extend parts of inflating modal are nothing than plain shapes, in fact - curves that just get scaled when the user hovers over the buttons. I've set the modal shape to disappear to reveal the extending parts so it will be clear for you what I mean (hover over buttons):
As you can see now - the extending parts are just curves on each side of the modal. They get larger when user hovers over the buttons.
Next, if user leaves the button with his pointer, we need to show the tension relief by mimicking the air currents that float out of the modal, just a few swirls would do here (hover over buttons and then release to see):
In the other case, when the user finally proceeds with the button click, we will blow up the modal as a consequence of the modal's tension and show the chosen word. That's the entire sequence (x):
Phew, that was intense. I hope you didn't get bored. We have touched only the surface of possible use cases in this post but I hope it puts some light on why and when you can use shapes. At this point it's probably clear that to create a shape you use a declarative call and the shape appears in any place of the screen (or HTMLElement) you want without any bootstrapping. You can use then method to chain states of shape and tune them afterward or even regenerate all random properties on it before starting the animation. Remember that shapes obey the tweenable interface thus it has tween properties, callbacks and public methods that any tween has.
Need to admit that this post was written as an introduction to more complex and mature module that is called Burst, it was important to familiarize you with the base concepts and API's syntax before we will proceed further. I think now you are ready to meet the Burst!
Assign your animation to an useRef immutable object inside a useEffect hook. Then you can use this ref to control the animation, like this: myRef.current.play()
First we create a useRef hooks, and takes advantage of its immutable object and assign our MoJS Shape animation to it. This way we can later use it to control our animation:
By checking if the ref already has been assigned, we can prevent the animation from being instantiated again on re-renders (very useful when using hot reloads):
Now lets add a button to play the animation when we click it. To control the animation, we can now reference the MoJS animation using bouncyCircle.current.play();
Note that this is a client-side library, and is not meant to be run on a server. So if you are using a library like Next.js, Gatsby, Nuxt.js or Angular Universal, make sure not to run your MoJS code on the server, just on the client side. How to do that differs from the library you are using. In React based libraries you can use the useEffect hook or a dynamic import (read more here(opens new window)).
