@maxigarcia/theme-transitions 0.2.1 → 0.4.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**, **fall**, or **page turn** animation—no animation framework required.
 
 ## Install
 
@@ -14,16 +14,20 @@ 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)                       |
+| Page turn       | [src/page-turn/README.md](./src/page-turn/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`, `onPageTurnAnimation`, types |
+| `@maxigarcia/theme-transitions/page-turn.css`       | Styles for page turn                                                                                   |
+| `@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/circular-reveal/index.js

@@ -1,4 +1,4 @@
-import { $html, $onTransitionEnd } from '../utils/index.js';
+import { $html } from '../utils/index.js';
 export function onCircularRevealAnimation(apply, origin, options) {
     if (!document.startViewTransition) {
         apply();
@@ -16,12 +16,12 @@ export function onCircularRevealAnimation(apply, origin, options) {
     }
     html.style.setProperty('--theme-reveal-x', `${x}%`);
     html.style.setProperty('--theme-reveal-y', `${y}%`);
-    document.startViewTransition(apply);
+    const transition = document.startViewTransition(apply);
     const animationComplete = () => {
         html.style.removeProperty('--theme-reveal-x');
         html.style.removeProperty('--theme-reveal-y');
         html.style.removeProperty('--theme-reveal-blur');
         html.classList.remove('circular-reveal', 'circular-reveal--blur-circle');
     };
-    $onTransitionEnd(animationComplete, 600);
+    void transition.finished.finally(animationComplete);
 }

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,5 @@
 export * from './circular-reveal/index.js';
+export * from './fall/index.js';
+export * from './page-turn/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,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

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

package/dist/page-turn/index.css

@@ -0,0 +1,110 @@
+@keyframes theme-page-turn-out-left {
+  0% {
+    filter: brightness(1);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(0deg) rotateX(0deg);
+  }
+
+  16% {
+    filter: brightness(0.98);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(-14deg) rotateX(0.5deg);
+  }
+
+  42% {
+    filter: brightness(0.92) drop-shadow(-8px 2px 6px rgb(0 0 0 / 0.14));
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(-50deg) rotateX(0.25deg);
+  }
+
+  72% {
+    filter: brightness(0.9) drop-shadow(-4px 1px 4px rgb(0 0 0 / 0.1));
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(-80deg) rotateX(0deg);
+  }
+
+  100% {
+    filter: brightness(0.9);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(-90deg) rotateX(0deg);
+  }
+}
+
+@keyframes theme-page-turn-out-right {
+  0% {
+    filter: brightness(1);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(0deg) rotateX(0deg);
+  }
+
+  16% {
+    filter: brightness(0.98);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(14deg) rotateX(0.5deg);
+  }
+
+  42% {
+    filter: brightness(0.92) drop-shadow(8px 2px 6px rgb(0 0 0 / 0.14));
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(50deg) rotateX(0.25deg);
+  }
+
+  72% {
+    filter: brightness(0.9) drop-shadow(4px 1px 4px rgb(0 0 0 / 0.1));
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(80deg) rotateX(0deg);
+  }
+
+  100% {
+    filter: brightness(0.9);
+    transform: perspective(var(--theme-page-turn-perspective, 2000px)) rotateY(90deg) rotateX(0deg);
+  }
+}
+
+html.page-turn::view-transition-old(root),
+html.page-turn::view-transition-new(root),
+html.page-turn::view-transition-old(*),
+html.page-turn::view-transition-new(*) {
+  mix-blend-mode: normal;
+}
+
+html.page-turn::view-transition-group(root),
+html.page-turn::view-transition-group(*) {
+  animation: none;
+  overflow: visible;
+  transform-style: preserve-3d;
+}
+
+html.page-turn::view-transition-image-pair(root),
+html.page-turn::view-transition-image-pair(*) {
+  isolation: isolate;
+  transform-style: preserve-3d;
+}
+
+html.page-turn::view-transition-new(root),
+html.page-turn::view-transition-new(*) {
+  animation: none;
+  opacity: 1;
+  transform: translateZ(-1px);
+  z-index: 0;
+}
+
+html.page-turn::view-transition-old(root),
+html.page-turn::view-transition-old(*) {
+  animation: theme-page-turn-out-left var(--theme-page-turn-duration, 750ms) cubic-bezier(0.45, 0.05, 0.55, 0.95)
+    forwards;
+  backface-visibility: hidden;
+  opacity: 1;
+  transform-origin: left center;
+  transform-style: preserve-3d;
+  z-index: 1;
+}
+
+html.page-turn--right::view-transition-old(root),
+html.page-turn--right::view-transition-old(*) {
+  animation-name: theme-page-turn-out-right;
+  transform-origin: right center;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html.page-turn::view-transition-old(root),
+  html.page-turn::view-transition-new(root),
+  html.page-turn::view-transition-old(*),
+  html.page-turn::view-transition-new(*) {
+    animation: none;
+    filter: none;
+    transform: none;
+  }
+}

package/dist/page-turn/index.d.ts

@@ -0,0 +1,9 @@
+export type PageTurnEdge = 'left' | 'right';
+export interface PageTurnOptions {
+    /** Page turn duration in milliseconds. Defaults to `750`. */
+    duration?: number;
+    /** Edge the page pivots on. Defaults to `left`. */
+    edge?: PageTurnEdge;
+}
+export declare function onPageTurnAnimation(apply: () => void, options?: PageTurnOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/page-turn/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page-turn/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,IAAI,EACjB,OAAO,CAAC,EAAE,eAAe,GACxB,IAAI,CAqBN"}

package/dist/page-turn/index.js

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

package/dist/sweep-reveal/index.js

@@ -1,4 +1,4 @@
-import { $html, $onTransitionEnd } from '../utils/index.js';
+import { $html } from '../utils/index.js';
 export function onSweepRevealAnimation(apply, direction = 'up') {
     if (!document.startViewTransition) {
         apply();
@@ -19,11 +19,11 @@ export function onSweepRevealAnimation(apply, direction = 'up') {
     html.classList.add('sweep-reveal');
     html.style.setProperty('--theme-reveal-direction-from', directionFrom);
     html.style.setProperty('--theme-reveal-direction-to', directionTo);
-    document.startViewTransition(apply);
+    const transition = document.startViewTransition(apply);
     const animationComplete = () => {
         html.classList.remove('sweep-reveal');
         html.style.removeProperty('--theme-reveal-direction-from');
         html.style.removeProperty('--theme-reveal-direction-to');
     };
-    $onTransitionEnd(animationComplete, 600);
+    void transition.finished.finally(animationComplete);
 }

package/dist/utils/index.d.ts

@@ -1,3 +1,2 @@
 export declare function $html(): HTMLElement;
-export declare function $onTransitionEnd(callback: () => void, duration?: number): void;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,gBAEpB;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,QAAQ,GAAE,MAAY,QAI5E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,gBAEpB"}

package/dist/utils/index.js

@@ -1,8 +1,3 @@
 export function $html() {
     return document.documentElement;
 }
-export function $onTransitionEnd(callback, duration = 600) {
-    setTimeout(() => {
-        callback();
-    }, duration);
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maxigarcia/theme-transitions",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "license": "ISC",
   "homepage": "https://github.com/MaxiGarcia13/js-theme-animation-monorepo/tree/main/packages/theme-transitions#readme",
   "repository": {
@@ -31,7 +31,9 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./page-turn.css": "./dist/page-turn/index.css",
     "./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",