clip-rect

Helper to create clip rect animation with gsap


Keywords
clip, rect, gasp, animation, tween
License
MIT
Install
npm install clip-rect@1.2.0

Documentation

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
}));

example