Slice Revealer is a easy to use dependency free library that allows users to cover and uncover DOM elements with customizable animated slices. The idea was inspired by Zhenya Rynzhuk of Sochnik's transition experiments and Mary Lou's Slice Revealer Demo which is on Codrops.
Documentation site coming soon. For now refer to the Documentation section below.
Currently the only way to use Slice Revealer is to manually download and link slickRevealer.min.js and slickRevealer.css in your HTML
<head>
<link rel="stylesheet" type="text/css" href="./sliceRevealer.css">
</head>
<body>
<script src="./sliceRevealer.min.js"></script>
<!-- Link your JavaScript file that uses sliceRevealer here --->
</body>For a basic example head over to this CodePen.
The DOM Element you want to cover/reveal MUST have it's position, height, and width set explicitly.
<!-- Important! Always set the container position/height/width explicitly in your HTML or CSS-->
<div id="sr-target" style="position: relative; height: 100%; width: 100%"></div>Then in your javascript you need to target a DOM Element you want to cover/reveal and create a SliceRevealer() instance. For more information on a valid target refer to the Targeting section below.
const target = document.getElementById("sr-target");
const instance = sliceRevealer(target);When you want to cover up your image just type:
instance.goPhase("end");When you want it to go back to it's starting position just type:
instance.goPhase("start")And that's it! For more in-depth information on customizing your Slice Revealer refer to the Initialization section below.
For a quick demo on intializing, targeting, and setting options head to this CodePen
All Slice revealer instances are made through the sliceRevealer() function which takes two arguments.
Creates and returns an instance of SliceRevealer()
const target = document.getElementById('sr-target');
const instance = sliceRevealer(target, options);| Parameter | Type | Description |
|---|---|---|
| target | Element object | NodeList object | jQuery Object | For more information on the target parameter refer to the Targeting section |
| options (optional) | Object | For more information on the options parameter refer to the Options (Initializing) section |
When passing a target to sliceRevealer() you can use both getElementById() or getElementsByClassName(). Please note that using getElementsByClassName() will only initialize Slice Revealer on the first element found.
// Both of these work!
const target = document.getElementById("targetID");
const target = document.getElementsByClassName("targetClassName")[0];While Slice Revealer is dependency free and does not rely on jQuery you can still pass in jQuery objects as targets.
// This works too!
const target = $(someJQuerySelector)[0];| Name | Type | Default | Example | Description |
|---|---|---|---|---|
| direction | String | "horizontal" | CodePen | Accepts "horizontal" or "vertical". Determines the slices will be laid out as horizontal rows or vertical columns. |
| numOfSlices | Number (Integer) | 8 | CodePen | The number of slices. |
| sliceDuration | Number (Float) | 0.8 | CodePen | The transition duration for a single slice. |
| totalDuration | Number (Float) | 1.3 | CodePen | The transition duration of the entire animation. |
| transitionOrder | String | Array | "standard" | CodePen | Accepts "standard", "random", "reverse", or an Array. Determines the order in which the slices will animate. |
| color | String | "#ffffff" | CodePen | Accepts a CSS Color Value Determines the color the slices will be in throughout the animation. |
| startPosition | String | Array | "left" | CodePen | Accepts "top", "bottom", "right", "left", or "middle". Determines the position the slices to animate to for the start phase. |
| halfwayPostion | String | Array | "middle" | CodePen | Accepts "top", "bottom", "right", "left", or "middle". Determines the position the slices to animate to for the halfway phase. |
| endPosition | String | Array | "middle" | CodePen | Accepts "top", "bottom", "right", "left", or "middle". Determines the position the slices to animate to for the end phase. |
| curPosition | String | Array | matches startPosition | N/A | Accepts "top", "bottom", "right", "left", or "middle". Determines the position the slices will be in when the instance is created with sliceRevealer(). |
| startOptions | Object | {} | CodePen | Accepts an Object that will pass options whenever you animate to the start phase. For a list of valid phase options refer to the Options (Phase) section. |
| halfwayOptions | Object | {} | CodePen | Accepts an Object that will pass options whenever you animate to the halfway phase. For a list of valid phase options refer to the Options (Phase) section. |
| endOptions | Object | {} | CodePen | Accepts an Object that will pass options whenever you animate to the end phase. For a list of valid phase options refer to the Options (Phase) section. |
| queueAnimation | Boolean | false | N/A | If true then firing an animation while an animation is already playing will queue the second animation behind the first one and fire when the first one finishes. You can only have one queued animation per instance at a time. Queuing a new one will replace the current one. |
| sticky | Boolean | false | N/A | By default the position of the element that contains the Slice Revealer instance has position: abosolute. If true then container element will have position: sticky. Used when target has scrollable content. |
| zIndex | Number (Integer) | 1 | N/A | Sets the z-index of the instance's container element. |
All methods are called on the instance that is created when initializing
const target = document.getElementById("sr-target");
const instance = sliceRevealer(target);instance.goPhase(phase, options);Calling .goPhase() will animate the instance's slices to the passed phase's set position. It takes a phase parameter and an optional options (phase) parameter.
There are 3 different phases you can pass: "start", "halfway", and "end". The phase passed will animate the slices according to that phases's option that were set during initialization.
The options passed during goPhase() will override any default options and options that were set during initialization.
| Name | Type | Default | Example | Description |
|---|---|---|---|---|
| startCB | Function | undefined | CodePen | Callback function that runs once the animation starts |
| doneCB | Function | undefined | CodePen | Callback function that runs once the animation has fully completed. Does not run if animation is replaced by another goPhase() call. |
| sliceDuration | Number (Float) | 0.8 | N/A | The transition duration for a single slice. |
| totalDuration | Number (Float) | 1.3 | N/A | The transition duration of the entire animation. |
| transitionOrder | String | Array | "standard" | N/A | Accepts "standard", "random", "reverse", or an Array. Determines the order in which the slices will animate. |
| color | String | "#ffffff" | N/A | Accepts a CSS Color Value Determines the color the slices will be in throughout the animation. |
| queueAnimation | Boolean | false | N/A | If true then firing an animation while an animation is already playing will queue the second animation behind the first one and fire when the first one finishes. You can only have one queued animation per instance at a time. Queuing a new one will replace the current one. |
instance.resetPosition(position);Calling .resetPosition() will position slices instantly without a transition. It takes an optional position parameter. Not passing in a position will automatically reset to whatever startPosition was set to during instance initializing.
There are 5 different positions" "top", "bottom", "left", "right", and "middle". You can also pass in an array of positions for each individual slice.
Slice Revealer is an open source software under the MIT license
Interested in who made this? Come visit my portfolio at MaiCoding
Want more sick and easy to use animations? Come over to AnimationZone