37 questions
- Bountied 0
- Unanswered
- Frequent
- Score
- Trending
- Week
- Month
- Unanswered (my tags)
1
vote
0
answers
50
views
How to keep the background animation running smoothly when transitioning between pages using Astro.js?
I have this background animation running and the code looks something like this:
body {
background-image:
url("../assets/asset1.webp"), url("../assets/asset2.webp"),
url(&...
2
votes
2
answers
130
views
ViewTransition for inverse circular reveal (animate old page instead of new one)
Situation
Consider the following ViewTransition between two HTML pages (Multi-page app, MPA).
The code for this is simple.
<!-- old.html -->
<html>
<head>
<link rel="...
1
vote
2
answers
149
views
CSS View Transitions - sticky element position is set to top = 0 during transition on chrome mobile
I'm trying to keep a position: sticky navbar in the same position during view transition as it was before the transition started but for some reason it jumps to the very top of the page.
The issue ...
0
votes
1
answer
215
views
How to prevent Angular View Transitions on layout switch and initial load in nested router outlets?
I'm implementing View Transitions API in Angular 20+ with nested router outlets and need to prevent animations in specific scenarios. I have two main layouts (auth and dashboard) and want to:
Skip ...
0
votes
1
answer
339
views
Animations between View Transitions looking weird on Chrome but fine in Firefox/Safari
I'm crafting a personal portfolio website with Astro.
I got View Transitions enabled, and GSAP animations tied to my persistent header on the pages.
The header's animation should close the navigation (...
0
votes
0
answers
26
views
View transition with circular mask glitches in Chrome
I want to implement a simple view transition animation where a circular mask slowly reveals the new page. The animation glitches when running it in Google Chrome (Version 134.0.6998.166 arm64). I don’...
0
votes
0
answers
110
views
Nextjs App Router View Transitions: Outgoing Page Duplicate on Forward Navigation – Why and How to Fix?
I have the following simple page transition (see video), where the outgoing page (page 1) is supposed to slightly move to left while the incoming page (page 2) slides in from right. Going back from ...
0
votes
0
answers
93
views
How do I cancel active view transition?
There is skipTransition() method but how am i even supposed to call it since page is not interactive by design. So to skip active transition i have to actually do something which i cannot?
const ...
0
votes
2
answers
165
views
Why are elements with view-transition-name painted on top of elements with position fixed?
div {
width: 50px;
height: 50px;
border: solid 2px black;
}
.fixed {
position: fixed;
top: 25px;
left: 25px;
background-color: red;
}
.named {
background-color: green;
view-...
2
votes
0
answers
78
views
What's the point of the `::view-transition-image-pair()` pseudo element?
According to the spec "This element exists to provide isolation: isolate for its children". Can't you just do that directly with ::view-transition-group() ?
It also says the following:
This ...
1
vote
1
answer
190
views
CSS View Transition: height added during transition that isn't there in either before or after view
I'm playing with CSS View Transitions. One example I've seen in a number of places is to use it to animate the underline of the active tab. I thought, "Oh, it should be easy to modify that to ...
2
votes
0
answers
148
views
How to disable view transitions for a specific router outlet?
I have enabled view transitions using the withViewTransitions() function in provideRouter().
Now I like to write a directive or something to be able to disable the transition view for a specific <...
3
votes
1
answer
307
views
Smoothly transition SVG elements with the view transition API
I have the following problem: I am trying to move SVG elements with the view transition API smoothly from one position to the other by applying a view-transition-name. While this works perfectly for ...
2
votes
1
answer
244
views
Angular build warning with view transition pseudo elements
In a CSS file, I have two simple view-transition styling rules.
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
::view-transition-old(root) {
animation: 90ms cubic-bezier(0.4, 0,...
0
votes
1
answer
287
views
Why doesn't transition-duration work on this view transition?
This is working, but the duration setting is ignored. What am I missing?
https://jsfiddle.net/r76z0o8s/
function onClick(e) {
e.target.classList.add('clicked_media_transition')
document....