Peel.js
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.
Static Examples
Simple
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:
Corner
Any corner can be used for the peel effect:
Shadows
The shadow effects can be controlled through various options to the constructor (options listed below):
Reflection
Adding a back reflection gives the peel a shiny effect. Reflection strength can be controller in the constructor options (see below):
Circle
SVG shapes can also be used for clipping effects:
Path
More complex shapes such as paths can create custom shapes:
Dynamic Examples
Dragging
Allowing the user to drag the effect by mouse or touch.
Dragging Heart
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.
Constraining
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:
Page turning effect
Any number of corners can be constrained. Most often this is used to create a book-like effect, which there is a shortcut for:
Fade threshold
The top layer can be faded out past a threshold which represents the clipped area of the top layer.
Fading out
Using the getAmountClipped method gives you greater control over behavior, such as stopping the effect after the top layer has been removed.
Setting a peel path
Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
Peel path as a bezier curve
Sometimes you want the peel animation to follow an exact path rather than being unrestricted. The setPeelPath and setTimeAlongPath methods can accomplish this.
Animating a peel path
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.
Fading a peel path
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.