luruke / Clip Rect
Licence: mit
✂️ - clip-rect is an helper to create painless `clip: rect()` animations with GSAP.
Stars: ✭ 40
Programming Languages
javascript
184084 projects - #8 most used programming language
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
new ClipRect(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.getElementById('box');
new ClipRect(el, {
from: ClipRect.RIGHT,
to: ClipRect.LEFT,
duration: 1,
reverse: true,
clearProps: false
});
Example with timeline
var el = document.getElementById('box');
var tl = new TimelineLite();
tl.to(el, 1, { backgroundColor: 'blue' });
tl.add(new ClipRect(el, {
from: ClipRect.TOP,
to: ClipRect.BOTTOM,
duration: 1,
reverse: true,
clearProps: false
}));
tl.add(new ClipRect(el, {
from: ClipRect.LEFT,
to: ClipRect.RIGHT,
duration: 1
}));
tl.add(new ClipRect(el, {
from: ClipRect.TOP,
to: ClipRect.BOTTOM,
reverse: true,
clearProps: false
}));
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].