Animate simple site static pages routing.
npm install dynamic-content-routing
import DynamicContentRouting from 'dynamic-content-routing';
// utils (optional)
import {
linear,
easeInOut,
moveYIn,
moveYOut,
fadeIn,
fadeOut,
// ...etc
} from 'dynamic-content-routing/packages/library/dist/utils';
// styles (optional)
import 'dynamic-content-routing/packages/library/dist/styles.min';
<script src="https://cdn.jsdelivr.net/npm/dynamic-content-routing"></script>
<!-- utils (optional) -->
<script src="https://cdn.jsdelivr.net/npm/dynamic-content-routing/packages/library/dist/utils/index-umd.min.js"></script>
<!-- styles (optional) -->
<link href="https://cdn.jsdelivr.net/npm/dynamic-content-routing/packages/library/dist/styles.min.css" rel="stylesheet" />
Usage:
window.DynamicContentRouting;
// utils (optional)
window.DynamicContentRoutingUtils;
window.DynamicContentRoutingUtils.linear;
window.DynamicContentRoutingUtils.easeInOut;
window.DynamicContentRoutingUtils.moveYIn;
// ...etc
Navigation links:
<nav>
<a href="./page-1" class="action-link"></a>
<a href="./page-2" class="action-link"></a>
<a href="./page-3" class="action-link"></a>
</nav>
Page 1 content:
<main id="dr-loading-main-content">
page 1 content
<div class="dr-loading-part">page 1 content part 1</div>
<div class="dr-loading-part">page 1 content part 2</div>
<div class="dr-loading-part">page 1 content part 3</div>
<div class="dr-loading-part">page 1 content part 4</div>
</main>
Similar: Page 2, Page 3, ..., Page N.
const dynamicContentRouting = new DynamicContentRouting();
dynamicContentRouting.run();
and you should include library styles (styles.min.css) inside your page.
- This library can be used for simple static site with not too many different scripts on different pages
- All listeners attached outside the main content must be detached manually
- If you want to load scripts or styles you should place them inside main content and make sure the listeners detached correctly.
If you want to animate with css:
Default props:
const dynamicContentRouting = new DynamicContentRouting({
linkSelector: '.action-link',
animationType: 'css',
content: {
selector: '#dr-loading-main-content',
animationOut: {
class: 'dr-main-content-animation-out',
duration: 500,
delay: 0,
},
animationIn: {
class: 'dr-main-content-animation-in',
duration: 500,
delay: 0,
},
},
parts: {
selector: '.dr-loading-part',
animationOut: {
class: 'dr-parts-content-animation-out',
// random duration from min to max
duration: { min: 50, max: 500 },
// random delayfrom min to max
delay: { min: 50, max: 500 },
},
animationIn: {
class: 'dr-parts-content-animation-in',
// random duration from min to max
duration: { min: 50, max: 500 },
// random delayfrom min to max
delay: { min: 50, max: 500 },
},
},
});
If you want to animate with js:
Default props:
const dynamicContentRouting = new DynamicContentRouting({
linkSelector: '.action-link',
animationType: 'js',
content: {
selector: '#dr-loading-main-content',
animationOut: {
timing: linear,
draw: fadeOut,
duration: 500,
delay: 0,
},
animationIn: {
timing: linear,
draw: fadeIn,
duration: 500,
delay: 0,
},
},
parts: {
selector: '.dr-loading-part',
animationOut: {
timing: linear,
draw: fadeOut,
// random duration from min to max
duration: { min: 50, max: 500 },
// random delayfrom min to max
delay: { min: 50, max: 500 },
},
animationIn: {
timing: linear,
draw: fadeIn,
// random duration from min to max
duration: { min: 50, max: 500 },
// random delayfrom min to max
delay: { min: 50, max: 500 },
},
},
});
And then
dynamicContentRouting.run();
dynamicContentRouting.on('complete', () => {});
dynamicContentRouting.on('start', () => {});
dynamicContentRouting.on('error', (error) => {});
- linkSelector — link selector for element a with href attribute. The main content will be uploaded after click
- animationType — how to animate content and parts: css or js
- content — main content options
- parts — options for elements that animate after the main content in a random order
- content.selector and parts.selector — selector for main content and parts
Only if animationType is 'js':
timing — animation timing function (curve, from 0 to 1)
draw — animation function, describes which css style properties will be animated according to the timing function
Only if animationType is 'css':
class — class, when added, the corresponding animation occurs
- run — attach all required listeners
- destroy — detach all required listeners
- start (void) — emits when animation and loading was started
- complete (void) — emits when loading and new content animation were successful
- error (errorObj) — emits when there was any error. See Errors section below
- ContentElementNotFoundError - there is no element matched specified selector (content.selector)
- HrefNotFoundError - clicked a element matched linkSelector has no href attribute
- AnimationError - any animation error for js animation type
- LoadingContentElementNotFoundError - there is no element matched specified selector (content.selector) on the loaded html-page
- ResponseParseError - loaded html-page could not be parsed
and some specific network errors:
- NetworkError
- NoInternetConnection
- RequestAbortedError
- RequestError
Released under MIT license