clip-rect
clip-rect
is an helper to create clip rect animation with Greensock.
Clip animations are nice, but sometimes they are hard to manage; clip-path: inset()
is not supported everywhere, and clip: rect()
is painful to handle and it doesn't supports percentage values.
This little helper aims to make rect animations easier w/Greensock GSAP.
Usage
npm install clip-rect
HTMLElement options;
It returns a GSAP TweenLite.to
call which can be used in GSAP timelines.
options
is an optional argument which can contain an object with different options:
Value | Default | Description |
---|---|---|
duration | 0.4 | Duration of the tween (in seconds) |
ease | TweenLite.defaultEase | GSAP easing function |
from | ClipRect.RIGHT | Direction of the start of the tweening |
to | ClipRect.LEFT | Direction of the start of the tweening |
clearProps | true | Whether remove the inline style after the animation |
reverse | false | Reverse the animation (for animateOut) |
Example
var el = document; el from: ClipRectRIGHT to: ClipRectLEFT duration: 1 reverse: true clearProps: false ;
Example with timeline
var el = document;var tl = ; tl; tl; tl; tl;