From 74aa9e2bc1a45647ca545a63e663550ab8255404 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:28:42 +0100 Subject: Scale the page slightly when loading new pages --- src/App.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 56fbd17..361ea0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,18 +34,20 @@ body { position: absolute; top: 0; left: 0; - transition: 300ms ease opacity; + transition: 300ms ease-in-out opacity, 300ms ease-in-out transform; width: 100%; } .fade-enter, .fade-exit-active { opacity: 0; + transform: scale(0.9); } .fade-enter-active { opacity: 1; z-index: 1; + transform: scale(1); } `; -- cgit v1.2.3 From 172ebd931bb507c8e280f96ab564b624678cdb61 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:32:40 +0100 Subject: Alter scale percentage --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 361ea0d..1f1acdb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ body { .fade-enter, .fade-exit-active { opacity: 0; - transform: scale(0.9); + transform: scale(0.8); } .fade-enter-active { -- cgit v1.2.3 From 67bb946ff71da6c0d170492245d716fb89198075 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 21:35:14 +0100 Subject: Reduce scale effect --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 1f1acdb..bacf843 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ body { .fade-enter, .fade-exit-active { opacity: 0; - transform: scale(0.8); + transform: scale(0.95); } .fade-enter-active { -- cgit v1.2.3 From 5efdccd292709ceec7b818a5974fbdfbeb9e848c Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 21:52:57 +0100 Subject: Reduce scale effect even more --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index bacf843..05d8ded 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ body { .fade-enter, .fade-exit-active { opacity: 0; - transform: scale(0.95); + transform: scale(0.98); } .fade-enter-active { -- cgit v1.2.3