From 3025b511ba7af93fac7ea84bef550b8b4ce9a7b8 Mon Sep 17 00:00:00 2001 From: Webber Date: Sun, 16 May 2021 02:32:24 +0200 Subject: [PATCH 1/6] Add react-spring for animations --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index a373eb54..c2b38b4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10232,13 +10232,6 @@ react-spring@^9.1.2: "@react-spring/web" "~9.1.2" "@react-spring/zdog" "~9.1.2" -react-visibility-sensor@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9" - integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w== - dependencies: - prop-types "^15.7.2" - react@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" From 422c2cfacb39c237be3366ed05fb83edd6c45ff9 Mon Sep 17 00:00:00 2001 From: Webber Date: Sun, 16 May 2021 02:32:45 +0200 Subject: [PATCH 2/6] Add empty sections --- components/pages/home/section/why-choose-for-us-section.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 components/pages/home/section/why-choose-for-us-section.tsx diff --git a/components/pages/home/section/why-choose-for-us-section.tsx b/components/pages/home/section/why-choose-for-us-section.tsx new file mode 100644 index 00000000..e69de29b From 242552b2bf27eb40ce8fe7b9daaf437e8db50da1 Mon Sep 17 00:00:00 2001 From: Webber Date: Sun, 16 May 2021 17:26:49 +0200 Subject: [PATCH 3/6] Add react-visibility-sensor --- yarn.lock | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/yarn.lock b/yarn.lock index c2b38b4f..a373eb54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10232,6 +10232,13 @@ react-spring@^9.1.2: "@react-spring/web" "~9.1.2" "@react-spring/zdog" "~9.1.2" +react-visibility-sensor@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9" + integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w== + dependencies: + prop-types "^15.7.2" + react@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" From 2597b826a9bebb8af4ebc95bf2f458bf053b5ce9 Mon Sep 17 00:00:00 2001 From: Webber Date: Sun, 16 May 2021 20:24:48 +0200 Subject: [PATCH 4/6] Animate page transitions --- assets/styles/antd-custom.less | 6 ++++ .../pages/home/section/opening-section.tsx | 6 ++-- .../pages/home/section/the-perks-section.tsx | 4 +-- core/routing/animated-page-transition.tsx | 29 +++++++++++++++++++ pages/_app.tsx | 13 +++++++-- 5 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 core/routing/animated-page-transition.tsx diff --git a/assets/styles/antd-custom.less b/assets/styles/antd-custom.less index 79af7e6b..4e36e72c 100644 --- a/assets/styles/antd-custom.less +++ b/assets/styles/antd-custom.less @@ -15,6 +15,12 @@ html { --brand-tertiary: @brand-tertiary; } +body { + // Support animations + background: @brand-secondary; + overflow-x: hidden; +} + // // Theme // diff --git a/components/pages/home/section/opening-section.tsx b/components/pages/home/section/opening-section.tsx index 4819168f..b6760d6d 100644 --- a/components/pages/home/section/opening-section.tsx +++ b/components/pages/home/section/opening-section.tsx @@ -18,18 +18,18 @@ const OpeningSection = () => { return (
- + - + The fastest and <strong>easiest</strong> way to automatically test and build your game projects - + {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} ⇩ diff --git a/components/pages/home/section/the-perks-section.tsx b/components/pages/home/section/the-perks-section.tsx index a5bd8463..73c02742 100644 --- a/components/pages/home/section/the-perks-section.tsx +++ b/components/pages/home/section/the-perks-section.tsx @@ -88,7 +88,7 @@ const cards = [ ]; const ThePerksSection = () => { - const column = { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 8 }; + const column = { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 6 }; return (
@@ -97,7 +97,7 @@ const ThePerksSection = () => { <Row gutter={[24, 16]} align="stretch" justify="space-around"> {cards.map((card, index) => ( - <Col {...column}> + <Col {...column} key={card.title}> <FadeIntoView className={styles.cardAnimator} delay={index * 100}> <Card className={styles.card} diff --git a/core/routing/animated-page-transition.tsx b/core/routing/animated-page-transition.tsx new file mode 100644 index 00000000..91621a71 --- /dev/null +++ b/core/routing/animated-page-transition.tsx @@ -0,0 +1,29 @@ +import { useTopLevelRoute } from '@/core/hooks/use-top-level-route'; +import React from 'react'; +import { animated, useTransition, config } from 'react-spring'; + +interface PageTransitionProps { + children: any; +} + +export const AnimatedPageTransition = ({ children }: PageTransitionProps) => { + const topLevelRoute = useTopLevelRoute(); + + const transitions = useTransition(topLevelRoute, { + from: { opacity: 0, transform: 'translate3d(100%, 0%, 0px)' }, + enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' }, + config: config.default, + }); + + return ( + <> + {transitions((animatedStyles, item) => { + return ( + <animated.main key={item} style={{ willChange: 'opacity, transform', ...animatedStyles }}> + {children(item)} + </animated.main> + ); + })} + </> + ); +}; diff --git a/pages/_app.tsx b/pages/_app.tsx index 9adfb079..2b71e79b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -10,19 +10,28 @@ import { configureStore } from '@reduxjs/toolkit'; import { reducer } from 'logic'; import { FirebaseAppProvider } from 'reactfire'; import config from 'core/config'; +import { AnimatedPageTransition } from '@/core/routing/animated-page-transition'; import '../assets/styles/antd-custom.less'; import 'highlight.js/styles/dracula.css'; const store = configureStore({ reducer }); -export default function App({ Component, pageProps }: AppProps) { +export default function App({ Component: SsrComponent, pageProps: ssrPageProps }: AppProps) { return ( <Provider store={store}> <FirebaseAppProvider firebaseConfig={config.firebase}> <InstantSearch searchClient={searchClient} indexName={searchIndex}> <IconContext.Provider value={{ className: 'anticon' }}> - <Component {...pageProps} /> + <AnimatedPageTransition> + {({ Component, pageProps }) => { + return Component ? ( + <Component {...pageProps} /> + ) : ( + <SsrComponent {...ssrPageProps} /> + ); + }} + </AnimatedPageTransition> </IconContext.Provider> </InstantSearch> </FirebaseAppProvider> From f5330830f1f8c675c15865eff542fd29a314f2ad Mon Sep 17 00:00:00 2001 From: Webber <webber@takken.io> Date: Sun, 16 May 2021 20:42:15 +0200 Subject: [PATCH 5/6] fix sticky behaviour inside animation container --- components/layout/base-layout.tsx | 2 +- components/layout/header/nav-bar.module.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/layout/base-layout.tsx b/components/layout/base-layout.tsx index 43df08ef..5d70e5eb 100644 --- a/components/layout/base-layout.tsx +++ b/components/layout/base-layout.tsx @@ -14,7 +14,7 @@ interface Props { const BaseLayout = ({ children, showSearch, stickyHeader }: Props) => ( <Layout style={{ minHeight: '100vh' }}> <NavBar showSearch={showSearch} stickyHeader={stickyHeader} /> - <Content style={{ paddingTop: stickyHeader ? '64px' : 0 }}>{children}</Content> + <Content>{children}</Content> <Footer /> </Layout> ); diff --git a/components/layout/header/nav-bar.module.scss b/components/layout/header/nav-bar.module.scss index bab4f494..5760284c 100644 --- a/components/layout/header/nav-bar.module.scss +++ b/components/layout/header/nav-bar.module.scss @@ -3,7 +3,8 @@ z-index: 50; // Stay above ant components &.sticky { - position: fixed; + position: sticky; + top: 0; } .brand { From 0dfdb12f306077a3fd420d73eac515db0387f27e Mon Sep 17 00:00:00 2001 From: Webber <webber@takken.io> Date: Sun, 16 May 2021 20:57:33 +0200 Subject: [PATCH 6/6] Easy there :) --- core/routing/animated-page-transition.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/routing/animated-page-transition.tsx b/core/routing/animated-page-transition.tsx index 91621a71..5180f9b3 100644 --- a/core/routing/animated-page-transition.tsx +++ b/core/routing/animated-page-transition.tsx @@ -10,7 +10,7 @@ export const AnimatedPageTransition = ({ children }: PageTransitionProps) => { const topLevelRoute = useTopLevelRoute(); const transitions = useTransition(topLevelRoute, { - from: { opacity: 0, transform: 'translate3d(100%, 0%, 0px)' }, + from: { opacity: 0, transform: 'translate3d(50%, 0%, 0px)' }, enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' }, config: config.default, });