From 46e8c70761cb96834dc54738254728cb9a4ae19b Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 26 Jul 2024 15:20:56 +0100 Subject: [PATCH 1/7] WIP --- packages/components/src/modal/style.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index e563b29070bef2..97ec7e8a7f4128 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -6,6 +6,7 @@ bottom: 0; left: 0; background-color: rgba($black, 0.35); + backdrop-filter: blur(4px); z-index: z-index(".components-modal__screen-overlay"); display: flex; // backdrop-filter: blur($grid-unit); @@ -26,8 +27,9 @@ // Have the content element fill the vertical space yet not overflow. display: flex; // Animate the modal frame/contents appearing on the page. - animation: components-modal__appear-animation 0.1s ease-out; + animation: components-modal__appear-animation 0.2s ease-out; animation-fill-mode: forwards; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @include reduce-motion("animation"); // Show a centered modal on bigger screens. @@ -80,10 +82,12 @@ @keyframes components-modal__appear-animation { from { - transform: translateY($grid-unit-40); + opacity: 0; + transform: scale(0.8); } to { - transform: translateY(0); + opacity: 1; + transform: scale(1); } } From 2972e7382f788ad26c404628605e9ff54f05f10f Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 16 Aug 2024 17:36:33 +0100 Subject: [PATCH 2/7] Simplify --- packages/components/src/modal/style.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index a878d18c3d7911..51d152405a0443 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -9,7 +9,6 @@ backdrop-filter: blur(4px); z-index: z-index(".components-modal__screen-overlay"); display: flex; - // backdrop-filter: blur($grid-unit); // This animates the appearance of the white background. @include edit-post__fade-in-animation(); } @@ -27,9 +26,8 @@ // Have the content element fill the vertical space yet not overflow. display: flex; // Animate the modal frame/contents appearing on the page. - animation: components-modal__appear-animation 0.2s ease-out; + animation: components-modal__appear-animation 0.2s cubic-bezier(0.4, 0, 0.2, 1); animation-fill-mode: forwards; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @include reduce-motion("animation"); // Show a centered modal on bigger screens. From e6d6d774e0448cf67a336a20d132585eadf8dc9f Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 19 Aug 2024 19:11:51 +0100 Subject: [PATCH 3/7] Remove blur --- packages/components/src/modal/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 51d152405a0443..847171f83ddd97 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -6,7 +6,6 @@ bottom: 0; left: 0; background-color: rgba($black, 0.35); - backdrop-filter: blur(4px); z-index: z-index(".components-modal__screen-overlay"); display: flex; // This animates the appearance of the white background. From e050d9acea4f9e959466929d080ff18ab573bca7 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 20 Aug 2024 12:47:05 +0100 Subject: [PATCH 4/7] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f824bf8d2b2ddc..d10d63d26a2262 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -56,6 +56,7 @@ - `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)). - `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)). - `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)). +- `Modal`: Update animation effect ([#64580](https://github.com/WordPress/gutenberg/pull/64580)). ### Bug Fixes From a1f7a62499d783fbdc1685e975b2d77eac26b853 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 22 Aug 2024 19:20:09 +0100 Subject: [PATCH 5/7] Adjust animation --- packages/components/src/modal/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 847171f83ddd97..822e8f3025ff7c 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -25,7 +25,7 @@ // Have the content element fill the vertical space yet not overflow. display: flex; // Animate the modal frame/contents appearing on the page. - animation: components-modal__appear-animation 0.2s cubic-bezier(0.4, 0, 0.2, 1); + animation: components-modal__appear-animation 0.2s cubic-bezier(0.29, 0, 0, 1); animation-fill-mode: forwards; @include reduce-motion("animation"); @@ -80,7 +80,7 @@ @keyframes components-modal__appear-animation { from { opacity: 0; - transform: scale(0.8); + transform: scale(0.9); } to { opacity: 1; From 0f3327cf23038de058d477479054498a26c93eb7 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 22 Aug 2024 19:26:52 +0100 Subject: [PATCH 6/7] duration --- packages/base-styles/_animations.scss | 2 +- packages/components/src/modal/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index bdfd7595da8e44..d28008dda9196f 100644 --- a/packages/base-styles/_animations.scss +++ b/packages/base-styles/_animations.scss @@ -1,4 +1,4 @@ -@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) { +@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) { animation: edit-post__fade-in-animation $speed ease-out $delay; animation-fill-mode: forwards; @include reduce-motion("animation"); diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 56dee4f0c2184d..47d5df116d8865 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -25,7 +25,7 @@ // Have the content element fill the vertical space yet not overflow. display: flex; // Animate the modal frame/contents appearing on the page. - animation: components-modal__appear-animation 0.2s cubic-bezier(0.29, 0, 0, 1); + animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1); animation-fill-mode: forwards; @include reduce-motion("animation"); From 251062464073335739c6c2a33bc96e62e7d1c28a Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 22 Aug 2024 19:31:18 +0100 Subject: [PATCH 7/7] overlay easing --- packages/base-styles/_animations.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index d28008dda9196f..ce1f935b7d4d5b 100644 --- a/packages/base-styles/_animations.scss +++ b/packages/base-styles/_animations.scss @@ -1,5 +1,5 @@ @mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) { - animation: edit-post__fade-in-animation $speed ease-out $delay; + animation: edit-post__fade-in-animation $speed linear $delay; animation-fill-mode: forwards; @include reduce-motion("animation"); }