[teamai] Push 87 resource(s) from XingfenD
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
## Mechanical
|
||||
|
||||
### Shutter
|
||||
|
||||
Two full-screen halves close from top and bottom, meet in the middle. Swap while closed. Open again.
|
||||
|
||||
```js
|
||||
tl.to("#shutter-top", { y: 0, duration: 0.25, ease: "power3.in" }, T);
|
||||
tl.to("#shutter-bot", { y: 0, duration: 0.25, ease: "power3.in" }, T);
|
||||
tl.set(old, { opacity: 0 }, T + 0.25);
|
||||
tl.set(new, { opacity: 1 }, T + 0.25);
|
||||
tl.to("#shutter-top", { y: -540, duration: 0.25, ease: "power3.out" }, T + 0.3);
|
||||
tl.to("#shutter-bot", { y: 540, duration: 0.25, ease: "power3.out" }, T + 0.3);
|
||||
```
|
||||
|
||||
### Clock Wipe
|
||||
|
||||
Radial polygon sweep stepping through quadrants. Use 9-point polygon with intermediate edge positions for smooth sweep.
|
||||
|
||||
```js
|
||||
tl.set(new, { opacity: 1, zIndex: 10 }, T);
|
||||
var d = 0.1; // duration per quadrant
|
||||
tl.set(new, { clipPath: "polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)" }, T);
|
||||
tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)", duration: d, ease: "none" }, T);
|
||||
tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)", duration: d, ease: "none" }, T + d);
|
||||
tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%)", duration: d, ease: "none" }, T + d*2);
|
||||
tl.to(new, { clipPath: "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%)", duration: d, ease: "none" }, T + d*3);
|
||||
tl.set(new, { clipPath: "none", zIndex: "auto" }, T + d*4 + 0.02);
|
||||
tl.set(old, { opacity: 0, zIndex: "auto" }, T + d*4 + 0.02);
|
||||
```
|
||||
Reference in New Issue
Block a user