Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Added transitions between pages #527

Merged
merged 5 commits into from
Sep 3, 2023
Merged

Feature: Added transitions between pages #527

merged 5 commits into from
Sep 3, 2023

Conversation

TheOnlyTails
Copy link
Contributor

@TheOnlyTails TheOnlyTails commented Aug 30, 2023

Description

Added some cool new transitions between pages and among other elements, including:

  • Regular pages crossfade between each other
  • When transitioning between the main blog page and individiual blog posts, the title and thumbnail of each post animate between their position in each page smoothly.
  • The marker indicating the current docs page in the docs sidebar animates between selected items

Please comment if you have any ideas for what we can add; I'm so excited about this I'd love to just experiment and see what's possible.

Motivation and Context

SvelteKit recently added support for the onNavigate lifecycle function, which unlocked the usage of the View Transition API.
This API makes visually appealing, app-like transitions easily possible on the web, and I saw the opportunity and jumped on it.

Fixes #532

Screenshots (if appropriate):

Screencast.from.2023-08-29.23-13-16.mp4
Screencast_from_2023-08-29_22-38-31.mp4

@TheOnlyTails TheOnlyTails added the enhancement New feature or request label Aug 30, 2023
@TheOnlyTails TheOnlyTails self-assigned this Aug 30, 2023
@yaira2 yaira2 changed the title added some cool transitions between pages Feature: Added transitions between pages Aug 30, 2023
yaira2
yaira2 previously approved these changes Aug 30, 2023
@yaira2 yaira2 added approved This pull request is approved needs review This pull request is ready to be reviewed and removed enhancement New feature or request approved This pull request is approved labels Aug 30, 2023
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Aug 30, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 40f18e2
Status: ✅  Deploy successful!
Preview URL: https://47c438ea.files-website-cml.pages.dev
Branch Preview URL: https://view-transitions.files-website-cml.pages.dev

View logs

@yaira2
Copy link
Member

yaira2 commented Aug 30, 2023

Was the blog page layout reversed?
image

@yaira2 yaira2 self-requested a review August 30, 2023 01:58
@TheOnlyTails
Copy link
Contributor Author

TheOnlyTails commented Aug 30, 2023

Yes, I discussed it with @mdtauk on discord and we agreed that it makes the transition look more natural.

@marcelwgn
Copy link
Contributor

I think this is really cool, thanks for implementing this. Given that we now animate the page header when opening a blog page, would it be worth scrolling the top when opening a specific blog post? I know that the blog page being visible in the middle was present beforehand, however with the animation I feel like this oddity is made even worse.

@TheOnlyTails
Copy link
Contributor Author

@chingucoding removing the scroller class from the <body> element did the trick, all pages now scroll to the top after navigating. Here's how this looks with the transitions:

Screencast.from.2023-09-03.21-34-48.mp4

Copy link
Member

@yaira2 yaira2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@yaira2 yaira2 merged commit db27496 into main Sep 3, 2023
1 check passed
@yaira2 yaira2 deleted the view-transitions branch September 3, 2023 20:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs review This pull request is ready to be reviewed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scroll to top after opening blog post
3 participants