Questions tagged [page-transition]
38 questions
5
votes
1 answer
React router dom v6 prevent transition without
I've learned that with react-router-dom v5 it was possible to use the component in order to ask the user before a page transition happens, so that the user can prevent it.
Now, for the time being, they removed it from v6 (planning to have a…
devnull69
- 16,402
- 8
- 50
- 61
5
votes
1 answer
Flutter animating two routes with inner animations
I'm completely stuck with it. I want to create a custom page route that will animate both the IN and the OUT pages. The animation of the routes themselves is a simple task, I'm doing it like this:
import 'package:flutter/material.dart';
…
Konstantin
- 1,150
- 13
- 31
3
votes
1 answer
Barba.js (v2.9.7) reloads current page instead of next one
I am trying to use Barba.js for the first time.
I basically want just one transition for every page (transition div displaying data.next.namespace slides in and out). The only exception is a preloading screen occurring only once on first page…
Vito
- 179
- 1
- 14
3
votes
0 answers
SWUP changing CSS files and the effects on fade in animations (HeadPlugin)
Hi I encountered a problem with how the HeadPlugin is effecting animations and determined a work around and thought I'd post it here, in-case anybody is running into the same issue. Also all of this may be misinformed and I might be missing…
justaweeb
- 31
- 2
2
votes
0 answers
How to useMemo to delay React Children from display on routeChange in Next.js for page transition?
I'm trying to apply page transition effect in Next.js. Because of the project limitation, I cannot use external library except from GSAP. I've achieved similar effect using useMemo to track the children, and update the display children when the…
havingaheadache
- 63
- 4
2
votes
1 answer
Add/remove classes on element/component during page transitions in layout/default.vue
I am looking for a solution to add and remove classes on components/elements outside of the
strnr
- 63
- 5
2
votes
0 answers
FadeIn/FadeOut page transition in flutter
I am stack at easy problem whitch i am unable to solve. I want to create easy fadein/out page transition in flutter web, but for some reason the transition only occure as FadeIn. Previous page does not fade out.
Here is a code:
PageRoute…
Jan Smitka
- 109
- 3
1
vote
0 answers
Page transition with Framer Motion
I am having a hard time trying to get the page transition I want with Framer motion.
The goal is when changing pages the new page will overlap the current one.
However, at the moment what happens is that the current page disappears as soon as the…
Bruno C
- 37
- 11
1
vote
0 answers
PageRoute transition with rounded corners
I'd like to have the card in my carousel to keep the rounded corners on the page transition to the new page. At the moment it get's square corners the moment I click to navigate to a new page.
Is there any way to keep them rounded like they are on…
Dion van den Berg
- 11
- 3
1
vote
0 answers
Flutter: GoRouter slide transition direction
I make GoRouter work with slide transitions. I want the transition to slide from right to left when the router makes push and left to right when the router pops.
Here is the working code:
transition_factory.dart
static CustomTransitionPage…
Yuriy N.
- 4,936
- 2
- 38
- 31
1
vote
0 answers
How to set up framer-motion in React Router Dom with its RouterProvider?
I was not able to set up Framer Motion in React Router Dom version 6.8.
The initial transition is working but not the exit at home page.
I am using createBrowserRouter and RouterProvider in the index.js file, and I have wrapped the page where I want…
mike
- 11
- 2
1
vote
1 answer
Nuxt 3 onLeave transition hook not working
Since I've been experimenting with Nuxt3 and animation libraries, I came across an issue for which I need help finding a solution for.
I want to do an easy transition with some Javascript hooks no CSS/basic transitions.
When a page loads (onEnter),…
aaron lejeune
- 83
- 5
1
vote
1 answer
use react component instead of motion's elements in Framer motion
Hi I have a component like this :
const Comp = (props) => {
return(
data here
)
}
and I want to use framer motion like this:
const Container = () => {
return(
Arash jahan bakhshan
- 163
- 8
1
vote
1 answer
(React) Lazy Loading components that use Framer-Motion page transitions
Looking up, down, and sideways for a solution to this problem.
My goal is to assign Lazy Loading to nearly all components in my React website. However, these components utilize framer-motion page transitions when these components enter and exit. …
Andrew B.
- 245
- 3
- 12
1
vote
0 answers
React-Spring causes current page to scroll to the top before transitioning to next page
I am using react-springs to transition from page to page in a NextJS web app.
To reproduce the error:
Open the codesandbox link: https://codesandbox.io/s/nextjs-page-transition-react-spring-ggx7n?file=/pages/_app.js
Navigate to the bottom of live…
SILENT
- 3,916
- 3
- 38
- 57