Dynamic peel effects with only HTML/CSS!
Currently supported by all browsers that support CSS clip paths and transforms (generally most evergreen browsers including mobile, but excluding IE). No dependencies.
Simplest possible example. 3 elements define the 3 layers used. A constructor sets up the effect, and a call to setPeelPosition tells it where to peel back to:
var p = new Peel('#simple');
p.setPeelPosition(80, 120);
Any corner can be used for the peel effect:
var p = new Peel('#top-left', {
corner: Peel.Corners.TOP_LEFT
});
p.setPeelPosition(80, 70);
The shadow effects can be controlled through various options to the constructor (options listed below):
var p = new Peel('#shadows', {
topShadow: false,
backShadowSize: .12,
bottomShadowDarkAlpha: 1,
bottomShadowLightAlpha: .4,
});
p.setPeelPosition(150, 0);
Adding a back reflection gives the peel a shiny effect. Reflection strength can be controller in the constructor options (see below):
var p = new Peel('#reflection', {
backReflection: true,
backReflectionAlpha: .3
});
p.setPeelPosition(150, 0);
SVG shapes can also be used for clipping effects:
var p = new Peel('#circle', {
circle: {
cx: 100,
cy: 100,
r: 100
}
});
p.setPeelPosition(100, 80);
More complex shapes such as paths can create custom shapes:
var p = new Peel('#heart', {
path: {
d: 'M101.260605,31.4241113 C122.403839,-11.2687842 173.108983,1.11145064 183.007355,11.8447551 C237.311569,70.7295532 142.521446,119.347653 101.260608,174.571349 C51.8099036,119.347653 -39.0680406,68.307428 18.4502396,11.8447553 C33.183089,-2.61770866 77.7850024,-11.2687842 101.260605,31.4241113 Z'
}
});
p.setPeelPosition(150, 0);
Allowing the user to drag the effect by mouse or touch.
var p = new Peel('#dragging');
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
});
Dragging works on custom shapes as well. Note that the corner point can be set anywhere, allowing the effect to precisely follow the mouse cursor.
var p = new Peel('#heart-drag', {
path: {
d: 'M101.260605,31.4241113 C122.403839,-11.2687842 173.108983,1.11145064 183.007355,11.8447551 C237.311569,70.7295532 142.521446,119.347653 101.260608,174.571349 C51.8099036,119.347653 -39.0680406,68.307428 18.4502396,11.8447553 C33.183089,-2.61770866 77.7850024,-11.2687842 101.260605,31.4241113 Z'
}
});
p.setCorner(101, 175);
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
});
The peeling effect can be constrained at any point. This can be thought of as a point on the layers that are connected and cannot be torn apart:
var p = new Peel('#constraint');
p.addPeelConstraint(Peel.Corners.BOTTOM_LEFT);
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
});
Any number of corners can be constrained. Most often this is used to create a book-like effect, which there is a shortcut for:
var p = new Peel('#book');
p.setMode('book');
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
});
The top layer can be faded out past a threshold which represents the clipped area of the top layer.
var p = new Peel('#fade');
p.setFadeThreshold(.9);
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
});
Using the getAmountClipped method gives you greater control over behavior, such as stopping the effect after the top layer has been removed.
var p = new Peel('#fade-out');
p.setFadeThreshold(.9);
p.handleDrag(function(evt, x, y) {
this.setPeelPosition(x, y);
if (p.getAmountClipped() === 1) {
p.removeEvents();
}
});
Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
var p = new Peel('#peel-path');
p.setPeelPath(200, 200, -200, -200);
p.handleDrag(function(evt, x, y) {
var t = (x - p.width) / -p.width;
this.setTimeAlongPath(t);
});
Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
var p = new Peel('#peel-curve');
p.setMode('book');
p.setPeelPath(130, 160, 50, 60, -70, 210, -130, 160);
p.handleDrag(function(evt, x, y) {
var t = (x - p.width) / (-p.width * 2);
this.setTimeAlongPath(t);
});
Since the peel path can be set simply with values between 0 and 1, that means that any animation library can tween those values to give a nice animated effect using setTimeAlongPath.
var p = new Peel('#peel-press');
p.setMode('book');
p.setPeelPath(130, 160, 50, 60, -70, 210, -130, 160);
p.t = 0;
var tween = new TweenLite(p, 1.5, {
t:1,
paused:true,
ease: Power2.easeOut,
onUpdate: function() {
p.setTimeAlongPath(this.target.t);
},
});
p.handlePress(function(evt) {
if (p.t > .5) {
tween.reverse();
} else {
tween.play();
}
});
If you use setFadeThreshold with a peel path, the threshold will be along the peel path instead of using the calculated area of the clipping effect.
var p = new Peel('#peel-fade-path');
p.setPeelPosition(170, 170);
p.setPeelPath(170, 170, 50, 170, 0, 0, 170, -170);
p.setFadeThreshold(.7);
p.t = 0;
var tween = new TweenLite(p, 1.5, {
t:1,
paused:true,
ease: Power2.easeIn,
onUpdate: function() {
p.setTimeAlongPath(this.target.t);
},
});
p.handlePress(function(evt) {
tween.seek(0);
tween.play();
});
Takes an element or query string and an options object. Options are listed below.
Sets a constraint on the distance of the peel. This can be thought of as a point on the layers that are connected and cannot be torn apart. Typically this only makes sense as a point on the outer edge, such as the left edge of an open book, or the top edge of a calendar. In this case, simply using 2 constraint points (top-left/bottom-left for a book, etc) will create the desired effect. An arbitrary point can also be used with an effect like a thumbtack holding the pages together. Can be 2 arguments as x,y coordinates or a single argument as a corner id defined in Peel.Corners.
Gets the ratio of the area of the clipped top layer to the total area. This is used to calculate an fade threshold.
Gets an option passed to the constructor on initialization or modified by setOption.
Sets a function to be called when the user drags, either with a mouse or with a finger (using touch events). fn will be called with the Peel instance as the this keyword, the original event as the first argument, and the x, y coordinates of the drag as the 2nd and 3rd arguments, respectively. el can be specified to initiate the drag to allow another element serve as a "hit area" that can be larger than the element itself.
Sets a function to be called when the user either clicks with a mouse or taps with a finger. fn will be called with the Peel instance as the this keyword, the original event as the first argument, and the x, y coordinates of the drag as the 2nd and 3rd arguments, respectively. el can be specified to initiate the press to allow another element serve as a "hit area" that can be larger than the element itself.
Sets the corner for the effect to peel back from. Can be 2 arguments as x,y coordinates or a single argument as a corner id defined in Peel.Corners. Default is the bottom right corner.
Sets a threshold above which the top layer (including the backside) layer will begin to fade out. The threshold is between 0 (no peel) and 1 (top layer is fully peeled off) and is calculated based on the visible clipped area. If a peel path is set, it will use the progress along the path instead.
A shortcut for setting a predefined "mode". Currently "book" and "calendar".
Sets an option to use for the effect. This method allows you to modify the options object that is passed to the constructor on initialization.
Sets the position of the peel effect. This point is the position of the corner that is being peeled back.
Sets a path along which the peel will follow. This can be a flat line segment (represented by 4 arguments: x1, y1, x2, y2) or a bezier curve (represented by 8 arguments: x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2 where cp1 and cp2 are the 2 bezier control points, similar to the bezierCurveTo canvas method.)
Sets the peel effect to a point in time (between 0 and 1) along a previously specified path. Will throw an error if no path exists.
Removes all event handlers previously set on the instance.
A constant that represents the top left corner of the bounding box.
A constant that represents the top right corner of the bounding box.
A constant that represents the bottom left corner of the bounding box.
A constant that represents the bottom right corner of the bounding box.
Whether the browser supports the features required to create the shadow and reflection effects.
Whether the browser supports the basic features required to create the peeling effect.
The constructor will look for the required elements to make the peel effect in the options, and create them if they do not exist. <el> can be "top", "back", "bottom", "topShadow", "backShadow", or "bottomShadow". Either an html element or a string can be passed. If a string is passed as topShadowElement, it would look for an element with the class name top-shadow-element inside the main element.
Any SVG element can be specified here which will create a subclip for the effect and allow custom shapes to be used. See the examples for more.
Creates a shadow effect on the back layer of the peel. Default is true.
A modifier for the back shadow size. Default is .04.
A modifier for the back shadow position. Default is 0.
Alpha value of the back shadow effect (color is black). Default is .1.
When true, the back shadow effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. "Book" mode sets this to false so that the effect can still have some depth when the book is "fully open". Default is true.
Creates a shiny effect on the back layer of the peel. Default is false.
A modifier for the reflection size. Default is .02.
A modifier for the back reflection position. Default is 0.
Alpha value of the reflection effect (color is white). Default is .15.
When true, the reflection effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. Default is true.
Creates a shadow effect on the bottom layer of the peel. Default is true.
A modifier for the bottom shadow size. Default is 1.5.
A modifier for the bottom shadow position. Default is 0.
Alpha value (color is black) of the dark shadow on the bottom layer when the bottom shadow is enabled. Default is .7.
Alpha value (color is black) of the light shadow on the bottom layer when the bottom shadow is enabled. Default is .1.
When true, the bottom shadow effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. "Book" mode sets this to false so that the effect can still have some depth when the book is "fully open". Default is true.
Sets the corner for the peel effect to happen from. Defined in Peel.Corners.
Sets the scale of the clipping box around the element. Default is 4, which means 4 times the element size. This allows the effects like box shadow to be seen even when the upper layer falls outsize the element boundaries. Setting this too high may encounter odd effects with clipping.
Whether initiating a drag event (by mouse or touch) will call preventDefault on the original event. Default is true.
When constraining the peel, the effect will "flip" around the axis of the constraint, which tends to look unnatural. This offset will pull the corner in a few pixels when approaching the axis line, which results in a smoother transition instead of a sudden flip. The value here determines how many pixels the corner is pulled in. Default is 5.
Sets a pre-defined mode, currently "book" or "calendar".
If true, the peel effect will be set to its relative corner on initialization. Default is true.
Creates a shadow effect on the top layer of the peel. This may be a box-shadow or drop-shadow (filter) depending on the shape of the clipping. Default is true.
Alpha level of the top shadow. This may be a box-shadow or drop-shadow depending on the layer's shape. Default is .4.
Amount of blur on the top shadow. This may be a box-shadow or drop-shadow depending on the layer's shape. Default is 3.
When a complex (non-rectangular) shape is used for the clipping effect, if this option is true another SVG shape will be embedded in the top layer to be used as the drop shadow. This is required for the drop-shadow filter effect but can be turned off here as the drop shadow effect can sometimes produce odd results. Default is true.
The X offset for the top shadow. Default is 0.
The Y offset for the top shadow. Default is 2.