@maxigarcia/theme-transitions 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @maxigarcia/theme-transitions
 
-Lightweight, CSS-first theme transitions for the web. Wrap your theme change in the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) and reveal the new theme with a **circular** or **sweep** animation—no animation framework required.
+Lightweight, CSS-first theme transitions for the web. Wrap your theme change in the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) and reveal the new theme with a **circular**, **sweep**, or **fall** animation—no animation framework required.
 
 ## Install
 
@@ -14,16 +14,18 @@ npm install @maxigarcia/theme-transitions
 | --------------- | ---------------------------------------------------------------- |
 | Circular reveal | [src/circular-reveal/README.md](./src/circular-reveal/README.md) |
 | Sweep reveal    | [src/sweep-reveal/README.md](./src/sweep-reveal/README.md)       |
+| Fall            | [src/fall/README.md](./src/fall/README.md)                       |
 
 Each module has its own README with setup, API, and usage examples.
 
 ## Package exports
 
-| Import                                              | Purpose                                                      |
-| --------------------------------------------------- | ------------------------------------------------------------ |
-| `@maxigarcia/theme-transitions`                     | `onCircularRevealAnimation`, `onSweepRevealAnimation`, types |
-| `@maxigarcia/theme-transitions/circular-reveal.css` | Styles for circular reveal                                   |
-| `@maxigarcia/theme-transitions/sweep-reveal.css`    | Styles for sweep reveal                                      |
+| Import                                              | Purpose                                                                         |
+| --------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `@maxigarcia/theme-transitions`                     | `onCircularRevealAnimation`, `onSweepRevealAnimation`, `onFallAnimation`, types |
+| `@maxigarcia/theme-transitions/circular-reveal.css` | Styles for circular reveal                                                      |
+| `@maxigarcia/theme-transitions/fall.css`            | Styles for fall                                                                 |
+| `@maxigarcia/theme-transitions/sweep-reveal.css`    | Styles for sweep reveal                                                         |
 
 ## Live demo
 

package/dist/fall/index.css

@@ -0,0 +1,57 @@
+@keyframes theme-fall-out {
+  0% {
+    transform: translateY(0) scaleY(1) scaleX(1) skewY(0deg);
+  }
+
+  15% {
+    transform: translateY(3vh) scaleY(0.94) scaleX(1.02) skewY(1deg);
+  }
+
+  100% {
+    transform: translateY(105%) scaleY(0.75) scaleX(1.06) skewY(4deg);
+  }
+}
+
+html.fall::view-transition-old(root),
+html.fall::view-transition-new(root),
+html.fall::view-transition-old(*),
+html.fall::view-transition-new(*) {
+  mix-blend-mode: normal;
+}
+
+html.fall::view-transition-group(root),
+html.fall::view-transition-group(*) {
+  animation: none;
+  transform-origin: bottom center;
+  overflow: visible;
+}
+
+html.fall::view-transition-image-pair(root),
+html.fall::view-transition-image-pair(*) {
+  isolation: isolate;
+}
+
+html.fall::view-transition-old(root),
+html.fall::view-transition-old(*) {
+  animation: theme-fall-out var(--theme-fall-duration, 700ms) cubic-bezier(0.33, 0, 0.67, 0.15) forwards;
+  transform-origin: bottom center;
+  opacity: 1;
+  z-index: 1;
+}
+
+html.fall::view-transition-new(root),
+html.fall::view-transition-new(*) {
+  animation: none;
+  opacity: 1;
+  z-index: 0;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html.fall::view-transition-old(root),
+  html.fall::view-transition-new(root),
+  html.fall::view-transition-old(*),
+  html.fall::view-transition-new(*) {
+    animation: none;
+  }
+}

package/dist/fall/index.d.ts

@@ -0,0 +1,6 @@
+export interface FallOptions {
+    /** Fall duration in milliseconds. Defaults to `700`. */
+    duration?: number;
+}
+export declare function onFallAnimation(apply: () => void, options?: FallOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/fall/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fall/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,IAAI,EACjB,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAqBN"}

package/dist/fall/index.js

@@ -0,0 +1,17 @@
+import { $html } from '../utils/index.js';
+export function onFallAnimation(apply, options) {
+    if (!document.startViewTransition) {
+        apply();
+        return;
+    }
+    const duration = options?.duration ?? 700;
+    const html = $html();
+    html.classList.add('fall');
+    html.style.setProperty('--theme-fall-duration', `${duration}ms`);
+    const transition = document.startViewTransition(apply);
+    const animationComplete = () => {
+        html.classList.remove('fall');
+        html.style.removeProperty('--theme-fall-duration');
+    };
+    void transition.finished.finally(animationComplete);
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './circular-reveal/index.js';
+export * from './fall/index.js';
 export * from './sweep-reveal/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './circular-reveal/index.js';
+export * from './fall/index.js';
 export * from './sweep-reveal/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maxigarcia/theme-transitions",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "ISC",
   "homepage": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/tree/main/packages/theme-transitions#readme",
   "repository": {
@@ -32,6 +32,7 @@
       "import": "./dist/index.js"
     },
     "./circular-reveal.css": "./dist/circular-reveal/index.css",
+    "./fall.css": "./dist/fall/index.css",
     "./sweep-reveal.css": "./dist/sweep-reveal/index.css"
   },
   "main": "./dist/index.js",