
Product
Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
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.
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) |
var el = document.getElementById('box');
new ClipRect(el, {
from: ClipRect.RIGHT,
to: ClipRect.LEFT,
duration: 1,
reverse: true,
clearProps: false
});
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
}));
FAQs
Helper to create clip rect animation with gsap
We found that clip-rect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.