From 33a74cccabb59e4292b880804349b1280fb6ea2c Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 10:46:54 +0100 Subject: [PATCH 01/10] Add root view transition --- dotcom-rendering/src/lib/rootStyles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index bb486305302..4bcbea428f7 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -62,5 +62,9 @@ export const rootStyles = ( } } + @view-transition { + navigation: auto; + } + ${rootAdStyles} `; From 0d33a54adb504c759eebe43a68a68eb414585683 Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 11:22:56 +0100 Subject: [PATCH 02/10] Add view-transition-name: hero-image to Picture --- dotcom-rendering/src/components/CardPicture.tsx | 3 +++ dotcom-rendering/src/components/Picture.tsx | 9 ++++++++- dotcom-rendering/src/lib/rootStyles.ts | 6 ++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx index 0184e20cebf..8f0b7312991 100644 --- a/dotcom-rendering/src/components/CardPicture.tsx +++ b/dotcom-rendering/src/components/CardPicture.tsx @@ -220,6 +220,9 @@ export const CardPicture = ({ decideMobileAspectRatioStyles(mobileAspectRatio), roundedCorners && borderRadius, isCircular && circularStyles, + css` + view-transition-name: hero-image; + `, ]} > {sources.map((source) => { diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index dbb49e3292b..5e4761621e5 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -523,7 +523,14 @@ export const Picture = ({ const fallbackSource = getFallbackSource(sources); return ( - + {/* Immersive Main Media images get additional sources specifically for when in portrait orientation */} {format.display === ArticleDisplay.Immersive && isMainMedia && ( <> diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index 4bcbea428f7..2ce17a01b56 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -66,5 +66,11 @@ export const rootStyles = ( navigation: auto; } + ::view-transition-old(hero-image), + ::view-transition-new(hero-image) { + animation-timing-function: ease-in-out; + animation-duration: 2s; + } + ${rootAdStyles} `; From bbf63dc8d780dcdbd236f5aba0bd20ec0a53fb57 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Wed, 7 May 2025 12:21:03 +0100 Subject: [PATCH 03/10] Hash alt text to make image unique --- dotcom-rendering/package.json | 2 + .../src/components/CardPicture.tsx | 12 +++-- dotcom-rendering/src/components/Picture.tsx | 12 +++-- pnpm-lock.yaml | 46 +++++++++++-------- 4 files changed, 48 insertions(+), 24 deletions(-) diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json index 77ee33e9863..fb6b8adaf2f 100644 --- a/dotcom-rendering/package.json +++ b/dotcom-rendering/package.json @@ -82,6 +82,7 @@ "@types/clean-css": "4.2.11", "@types/compression": "1.7.5", "@types/connect": "3.4.38", + "@types/crypto-js": "4.2.2", "@types/dompurify": "3.0.2", "@types/express": "4.17.21", "@types/he": "1.2.0", @@ -126,6 +127,7 @@ "compression": "1.7.4", "constructs": "10.4.2", "cpy": "11.0.0", + "crypto-js": "4.2.0", "css-loader": "7.1.2", "curlyquotes": "1.5.5", "dompurify": "3.2.4", diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx index 8f0b7312991..7f4e2a530db 100644 --- a/dotcom-rendering/src/components/CardPicture.tsx +++ b/dotcom-rendering/src/components/CardPicture.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { breakpoints, space, until } from '@guardian/source/foundations'; +import SHA256 from 'crypto-js/sha256'; import type { ImgHTMLAttributes } from 'react'; import React from 'react'; import type { AspectRatio } from '../types/front'; @@ -193,6 +194,10 @@ const decideMobileAspectRatioStyles = (aspectRatio?: AspectRatio) => { `; }; +function sha256Hash(message: string) { + return SHA256(message).toString(); +} + export const CardPicture = ({ mainImage, alt, @@ -220,9 +225,10 @@ export const CardPicture = ({ decideMobileAspectRatioStyles(mobileAspectRatio), roundedCorners && borderRadius, isCircular && circularStyles, - css` - view-transition-name: hero-image; - `, + alt && + css` + view-transition-name: hero-image-${sha256Hash(alt)}; + `, ]} > {sources.map((source) => { diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 5e4761621e5..3c2a93c2c90 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { breakpoints } from '@guardian/source/foundations'; +import SHA256 from 'crypto-js/sha256'; import { Fragment, useCallback, useEffect, useState } from 'react'; import { ArticleDesign, @@ -462,6 +463,10 @@ export const Sources = ({ sources }: { sources: ImageSource[] }) => { ); }; +function sha256Hash(message: string) { + return SHA256(message).toString(); +} + export const Picture = ({ role, format, @@ -526,9 +531,10 @@ export const Picture = ({ {/* Immersive Main Media images get additional sources specifically for when in portrait orientation */} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 254bbaac647..7e7c7700c1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -460,6 +460,9 @@ importers: '@types/connect': specifier: 3.4.38 version: 3.4.38 + '@types/crypto-js': + specifier: 4.2.2 + version: 4.2.2 '@types/dompurify': specifier: 3.0.2 version: 3.0.2 @@ -592,6 +595,9 @@ importers: cpy: specifier: 11.0.0 version: 11.0.0 + crypto-js: + specifier: 4.2.0 + version: 4.2.0 css-loader: specifier: 7.1.2 version: 7.1.2(webpack@5.99.7) @@ -4074,7 +4080,7 @@ packages: '@typescript-eslint/parser': 6.18.0(eslint@8.56.0)(typescript@5.5.3) eslint: 8.56.0 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.18.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint@8.56.0) tslib: 2.6.2 typescript: 5.5.3 transitivePeerDependencies: @@ -6122,7 +6128,7 @@ packages: react-docgen-typescript: 2.2.2(typescript@5.5.3) tslib: 2.6.2 typescript: 5.5.3 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) transitivePeerDependencies: - supports-color dev: false @@ -6766,6 +6772,10 @@ packages: '@types/node': 22.14.1 dev: false + /@types/crypto-js@4.2.2: + resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==} + dev: false + /@types/debug@4.1.12: resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} dependencies: @@ -7691,8 +7701,8 @@ packages: webpack: ^5.82.0 webpack-cli: 6.x.x dependencies: - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.2.1)(webpack@5.99.7) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.7) dev: false /@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.99.7): @@ -7702,8 +7712,8 @@ packages: webpack: ^5.82.0 webpack-cli: 6.x.x dependencies: - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.2.1)(webpack@5.99.7) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.7) dev: false /@webpack-cli/serve@3.0.1(webpack-cli@6.0.1)(webpack-dev-server@5.2.1)(webpack@5.99.7): @@ -7717,8 +7727,8 @@ packages: webpack-dev-server: optional: true dependencies: - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.2.1)(webpack@5.99.7) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.7) webpack-dev-server: 5.2.1(webpack-cli@6.0.1)(webpack@5.99.7) dev: false @@ -8392,7 +8402,7 @@ packages: dependencies: '@babel/core': 7.27.1 find-up: 5.0.0 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /babel-loader@9.2.1(@babel/core@7.27.1)(webpack@5.99.7): @@ -9584,7 +9594,7 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.47) postcss-value-parser: 4.2.0 semver: 7.5.4 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /css-loader@7.1.2(webpack@5.99.7): @@ -10631,7 +10641,7 @@ packages: enhanced-resolve: 5.18.1 eslint: 8.56.0 eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint@8.56.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 is-core-module: 2.16.1 @@ -11589,7 +11599,7 @@ packages: semver: 7.5.4 tapable: 2.2.1 typescript: 5.5.3 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /form-data-encoder@2.1.4: @@ -17156,7 +17166,7 @@ packages: peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /stylelint-config-recommended@14.0.0(stylelint@16.5.0): @@ -17649,7 +17659,7 @@ packages: semver: 7.5.4 source-map: 0.7.4 typescript: 5.5.3 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /ts-node@10.9.2(@swc/core@1.11.13)(@types/node@16.18.68)(typescript@5.1.6): @@ -18402,7 +18412,7 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.3.2 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) dev: false /webpack-dev-middleware@7.4.2(webpack@5.99.7): @@ -18462,8 +18472,8 @@ packages: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) - webpack-cli: 6.0.1(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@5.2.1)(webpack@5.99.7) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack-cli: 6.0.1(webpack-dev-server@5.2.1)(webpack@5.99.7) webpack-dev-middleware: 7.4.2(webpack@5.99.7) ws: 8.18.1 transitivePeerDependencies: @@ -18508,7 +18518,7 @@ packages: webpack: ^5.47.0 dependencies: tapable: 2.2.1 - webpack: 5.99.7(@swc/core@1.11.13)(esbuild@0.18.20)(webpack-cli@6.0.1) + webpack: 5.99.7(esbuild@0.18.20)(webpack-cli@6.0.1) webpack-sources: 2.3.1 dev: false patched: true From 9b9b780ba30ce8aa9a9c366170071495e00d73e2 Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 21:40:10 +0100 Subject: [PATCH 04/10] Assign a random hash for missing alt text --- dotcom-rendering/src/components/CardPicture.tsx | 7 +++---- dotcom-rendering/src/components/Picture.tsx | 7 +++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx index 7f4e2a530db..a89430013d7 100644 --- a/dotcom-rendering/src/components/CardPicture.tsx +++ b/dotcom-rendering/src/components/CardPicture.tsx @@ -225,10 +225,9 @@ export const CardPicture = ({ decideMobileAspectRatioStyles(mobileAspectRatio), roundedCorners && borderRadius, isCircular && circularStyles, - alt && - css` - view-transition-name: hero-image-${sha256Hash(alt)}; - `, + css` + view-transition-name: hero-image-${sha256Hash(alt ?? global.crypto.randomUUID())}; + `, ]} > {sources.map((source) => { diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 3c2a93c2c90..43c814294f3 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -531,10 +531,9 @@ export const Picture = ({ {/* Immersive Main Media images get additional sources specifically for when in portrait orientation */} From f02e49842b03499abbd6e779157f872df38f3bee Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 21:40:31 +0100 Subject: [PATCH 05/10] Don't show the scrollable highlights container --- dotcom-rendering/src/components/DecideContainer.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx index 85e33692f1b..828477b69d3 100644 --- a/dotcom-rendering/src/components/DecideContainer.tsx +++ b/dotcom-rendering/src/components/DecideContainer.tsx @@ -242,9 +242,10 @@ export const DecideContainer = ({ return ; case 'scrollable/highlights': return ( - - - + <> + // + // + // ); case 'flexible/special': return ( From 8daa89756d1075034ffa9a265e3f04b599a2cda9 Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 21:45:37 +0100 Subject: [PATCH 06/10] Remove unsed root styles --- dotcom-rendering/src/lib/rootStyles.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index 2ce17a01b56..4bcbea428f7 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -66,11 +66,5 @@ export const rootStyles = ( navigation: auto; } - ::view-transition-old(hero-image), - ::view-transition-new(hero-image) { - animation-timing-function: ease-in-out; - animation-duration: 2s; - } - ${rootAdStyles} `; From 33dfd517de8da792b8b323282ad72a88f5b15eb0 Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 21:53:35 +0100 Subject: [PATCH 07/10] Move view transition styles to lib --- dotcom-rendering/src/components/CardPicture.tsx | 10 ++-------- dotcom-rendering/src/components/Picture.tsx | 10 ++-------- dotcom-rendering/src/lib/view-transition.ts | 14 ++++++++++++++ 3 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 dotcom-rendering/src/lib/view-transition.ts diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx index a89430013d7..961a97eee39 100644 --- a/dotcom-rendering/src/components/CardPicture.tsx +++ b/dotcom-rendering/src/components/CardPicture.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/react'; import { breakpoints, space, until } from '@guardian/source/foundations'; -import SHA256 from 'crypto-js/sha256'; import type { ImgHTMLAttributes } from 'react'; import React from 'react'; +import { viewTransitionStyles } from '../lib/view-transition'; import type { AspectRatio } from '../types/front'; import type { ImageSizeType } from './Card/components/ImageWrapper'; import type { ImageWidthType } from './Picture'; @@ -194,10 +194,6 @@ const decideMobileAspectRatioStyles = (aspectRatio?: AspectRatio) => { `; }; -function sha256Hash(message: string) { - return SHA256(message).toString(); -} - export const CardPicture = ({ mainImage, alt, @@ -225,9 +221,7 @@ export const CardPicture = ({ decideMobileAspectRatioStyles(mobileAspectRatio), roundedCorners && borderRadius, isCircular && circularStyles, - css` - view-transition-name: hero-image-${sha256Hash(alt ?? global.crypto.randomUUID())}; - `, + viewTransitionStyles('hero-image', alt), ]} > {sources.map((source) => { diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 43c814294f3..1108247d0e1 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -1,6 +1,5 @@ import { css } from '@emotion/react'; import { breakpoints } from '@guardian/source/foundations'; -import SHA256 from 'crypto-js/sha256'; import { Fragment, useCallback, useEffect, useState } from 'react'; import { ArticleDesign, @@ -8,6 +7,7 @@ import { type ArticleFormat, } from '../lib/articleFormat'; import { generateImageURL } from '../lib/image'; +import { viewTransitionStyles } from '../lib/view-transition'; import type { RoleType } from '../types/content'; import type { AspectRatio } from '../types/front'; import type { Loading } from './CardPicture'; @@ -463,10 +463,6 @@ export const Sources = ({ sources }: { sources: ImageSource[] }) => { ); }; -function sha256Hash(message: string) { - return SHA256(message).toString(); -} - export const Picture = ({ role, format, @@ -531,9 +527,7 @@ export const Picture = ({ {/* Immersive Main Media images get additional sources specifically for when in portrait orientation */} diff --git a/dotcom-rendering/src/lib/view-transition.ts b/dotcom-rendering/src/lib/view-transition.ts new file mode 100644 index 00000000000..771cd693834 --- /dev/null +++ b/dotcom-rendering/src/lib/view-transition.ts @@ -0,0 +1,14 @@ +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; +import { SHA256 } from 'crypto-js'; + +function sha256Hash(message: string) { + return SHA256(message).toString(); +} + +export const viewTransitionStyles = ( + prefix: string, + stringToHash: string | undefined, +): SerializedStyles => css` + view-transition-name: ${prefix}-${sha256Hash(stringToHash ?? global.crypto.randomUUID())}; +`; From 4e06f3bcd2c4c6cd2fc3bd38eb2358bafcdcaffc Mon Sep 17 00:00:00 2001 From: Ravi <7014230+arelra@users.noreply.github.com> Date: Wed, 7 May 2025 22:29:35 +0100 Subject: [PATCH 08/10] Add example keyframe animations --- .../src/components/DecideContainer.tsx | 2 +- dotcom-rendering/src/lib/rootStyles.ts | 47 +++++++++++++++++++ dotcom-rendering/src/lib/view-transition.ts | 11 +++-- 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx index 828477b69d3..ce126867d32 100644 --- a/dotcom-rendering/src/components/DecideContainer.tsx +++ b/dotcom-rendering/src/components/DecideContainer.tsx @@ -29,7 +29,7 @@ import { FlexibleSpecial } from './FlexibleSpecial'; import { Island } from './Island'; import { NavList } from './NavList'; import { ScrollableFeature } from './ScrollableFeature.importable'; -import { ScrollableHighlights } from './ScrollableHighlights.importable'; +// import { ScrollableHighlights } from './ScrollableHighlights.importable'; import { ScrollableMedium } from './ScrollableMedium.importable'; import { ScrollableSmall } from './ScrollableSmall.importable'; import { StaticFeatureTwo } from './StaticFeatureTwo'; diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index 4bcbea428f7..6281e6185b9 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -66,5 +66,52 @@ export const rootStyles = ( navigation: auto; } + ::view-transition-old(roots) { + animation: 0.2s ease-in both slide-in; + } + + ::view-transition-new(roots) { + animation: 0.2s ease-in both slide-in; + } + + /* Create a custom animation */ + @keyframes slide-out { + from { + transform: translateX(0%); + } + + to { + transform: translateX(-100%); + } + } + + @keyframes slide-in { + from { + transform: translateX(100%); + } + + to { + transform: translateX(0%); + } + } + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + @keyframes zoom { + from { + transform: scale(0.95); + } + to { + transform: scale(1); + } + } + ${rootAdStyles} `; diff --git a/dotcom-rendering/src/lib/view-transition.ts b/dotcom-rendering/src/lib/view-transition.ts index 771cd693834..c8ebbbe172b 100644 --- a/dotcom-rendering/src/lib/view-transition.ts +++ b/dotcom-rendering/src/lib/view-transition.ts @@ -9,6 +9,11 @@ function sha256Hash(message: string) { export const viewTransitionStyles = ( prefix: string, stringToHash: string | undefined, -): SerializedStyles => css` - view-transition-name: ${prefix}-${sha256Hash(stringToHash ?? global.crypto.randomUUID())}; -`; +): SerializedStyles => { + const name = `${prefix}-${sha256Hash( + stringToHash ?? global.crypto.randomUUID(), + )}`; + return css` + view-transition-name: ${name}; + `; +}; From e77e8e40607ee47dbfe4585c3d5f547383786348 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 8 May 2025 14:32:54 +0100 Subject: [PATCH 09/10] fade in --- dotcom-rendering/src/lib/rootStyles.ts | 8 ++++---- dotcom-rendering/src/lib/view-transition.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index 6281e6185b9..0a4db3161dd 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -65,14 +65,14 @@ export const rootStyles = ( @view-transition { navigation: auto; } - - ::view-transition-old(roots) { + /* + ::view-transition-old(root) { animation: 0.2s ease-in both slide-in; } - ::view-transition-new(roots) { + ::view-transition-new(root) { animation: 0.2s ease-in both slide-in; - } + } */ /* Create a custom animation */ @keyframes slide-out { diff --git a/dotcom-rendering/src/lib/view-transition.ts b/dotcom-rendering/src/lib/view-transition.ts index c8ebbbe172b..e64439198c7 100644 --- a/dotcom-rendering/src/lib/view-transition.ts +++ b/dotcom-rendering/src/lib/view-transition.ts @@ -14,6 +14,6 @@ export const viewTransitionStyles = ( stringToHash ?? global.crypto.randomUUID(), )}`; return css` - view-transition-name: ${name}; + /* view-transition-name: ${name}; */ `; }; From 8bed0478880fd2e0ae22cbafc59e7f425a912f46 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 8 May 2025 15:18:43 +0100 Subject: [PATCH 10/10] WI --- dotcom-rendering/src/lib/rootStyles.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/lib/rootStyles.ts b/dotcom-rendering/src/lib/rootStyles.ts index 0a4db3161dd..69882e9829d 100644 --- a/dotcom-rendering/src/lib/rootStyles.ts +++ b/dotcom-rendering/src/lib/rootStyles.ts @@ -65,8 +65,8 @@ export const rootStyles = ( @view-transition { navigation: auto; } - /* - ::view-transition-old(root) { + + /* ::view-transition-old(root) { animation: 0.2s ease-in both slide-in; } @@ -74,6 +74,22 @@ export const rootStyles = ( animation: 0.2s ease-in both slide-in; } */ + /* ::view-transition-old(root) { + animation: 0.5s ease-in both spin; + } + + ::view-transition-new(root) { + animation: 0.5s ease-in both spin; + } */ + + /* ::view-transition-old(root) { + animation: 10.5s ease-in both spin; + } + + ::view-transition-new(root) { + animation: 10.5s ease-in both spin; + } */ + /* Create a custom animation */ @keyframes slide-out { from {