clip-rect

KO | EN

gitlite — search

#python #react #github-actions #css #mysql #deep-learning #postgresql #javascript #cli #hacktoberfest #docker #java

★ 42 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
```

```javascript
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
```javascript
var el = document.getElementById('box');

new ClipRect(el, {
    from: ClipRect.RIGHT,
    to: ClipRect.LEFT,
    duration: 1,
    reverse: true,
    clearProps: false
 });
```

# Example with timeline
```javascript
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](http://i.imgur.com/19TFaQH.gif)

clip-rect

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README