cr
clip-rect
npm i clip-rect
cr

clip-rect

✂️ - clip-rect is an helper to create painless `clip: rect()` animations with GSAP.

by Luigi De Rosa

1.2.0 (see all)License:MITTypeScript:Not Found
npm i clip-rect
Readme

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:

ValueDefaultDescription
duration0.4Duration of the tween (in seconds)
easeTweenLite.defaultEaseGSAP easing function
fromClipRect.RIGHTDirection of the start of the tweening
toClipRect.LEFTDirection of the start of the tweening
clearPropstrueWhether remove the inline style after the animation
reversefalseReverse 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
}));

example

Downloads/wk

5

GitHub Stars

41

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.2.0
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial