Stack Overflow
Stack Overflow

Questions tagged [page-transition]

38 questions
1
vote
1 answer

Flutter: How to animate the background color while page transition

I would like to animate between the background colors of two pages in flutter. I am talking about page transitions, but instead of transitioning the whole page I just want to change the background color of the new page (from the previous page's bg…
Midhunraj R Pillai
  • 484
  • 1
  • 3
  • 16
1
vote
1 answer

Call Javascript Function on hyperlink click and wait for animation to finish?

I have a page-out transition animation that I am using with css. It relies on changing the class of a container to start a css animation. I'm looking for a way to activate this animation (by adding the class to the container) then waiting for it to…
Aidan Cheung
  • 47
  • 4
1
vote
1 answer

React CSSTransition when you change page by Route

I'm using CSSTransition and it works amazing with components: I was wondering if I can use CSSTransition to have a nice…
Francesco Orsi
  • 1,739
  • 4
  • 16
  • 32
1
vote
1 answer

Delaying route change in Gatsby

Is there a way to delay a route change in Gatsby? I would use it to fade out a page before fading in the new page. I am doing this using the gatsby-browser api. Fading in the new page works well, but fading out the old one doesn’t work.
Werner Glinka
  • 11
  • 2
0
votes
0 answers

How to show complete animation in Next 13 while loading?

So I am using Next 13 loading.tsx to showcase loading before the final page renders. I am using framer motion to showcase one animation with icon moves from the bottom-left corner of the screen to the top-right corner of the screen, and I was hoping…
Visrut
  • 360
  • 4
  • 14
0
votes
0 answers

Barba js + GSAP page slide up transition problem

I'm new to Barba js and am struggling with a transition that I want to build. The idea is that the home page is a long list of buttons to other pages. On clicking on one of those buttons, that next page then slides up from the bottom. At the moment.…
jojo
  • 1
0
votes
0 answers

How can I make an Ionic custom page transition that waits for the next page to notify it's done loading?

I have an Ionic (v6) Angular (v15) project where I'd like to have custom page transitions that are split into 3 parts: The current page blurs The current page performs some infinite loading cycle (When I try to use blur or opacity here, the whole…
Jeremy Friesen
  • 383
  • 1
  • 3
  • 13
0
votes
0 answers

Why does transition begin wrong direction?

My page transition keeps starting on the left to the bottom, instead of top to bottom? I changed the css position and javascript positions to top, but when I click to the next page, it keeps starting on the left first before going from top to…
Webbie3
  • 3
  • 2
0
votes
1 answer

Page transitions in React Spring and Next JS

So I'm trying to create a simple page transition between pages in next.js using react-spring, however I can't get the unmounting component to fade out. Instead it just snaps out of the screen, while the new one fades in: The screen then loads…
WillMaddicott
  • 512
  • 6
  • 20
0
votes
1 answer

Nextjs x Framer Motion inertial scrolling with page transition

I've been working on an inertial scrolling implementation within Nextjs using Framer Motion but running into a bit of trouble when animation page transitions using animate presence. I'm hooking into the page scroll progress via useScroll and…
connorhansen
  • 171
  • 2
  • 15
0
votes
0 answers

Animated tree navigation using Vue & Nuxt

I'm starting to learn a few basics with nuxt & vue. I'm basically building a little list of elements that you can click and will expand with an image or some other content. What I made so far is an homepage with the list (like the first image) and 3…
Aurore
  • 696
  • 4
  • 16
0
votes
0 answers

The named parameter 'pageTransitionsTheme' isn't defined

How to update the following code to the last Flutter version? theme: ThemeData( primarySwatch: Colors.purple, accentColor: Colors.deepOrange, fontFamily: 'Lato', pageTransitionsTheme: PageTransitionsTheme( …
Hasani
  • 3,543
  • 14
  • 65
  • 125
0
votes
2 answers

Page transition hangs when using the native browser prev/next button

I am experiencing a strange behavior when using the native browser prev/next button. When navigating to a page and coming back to the previous one, the transition doesn’t disappear. It just hangs on the screen until I refresh the page. The funny and…
mrWilson
  • 91
  • 1
  • 2
  • 13
0
votes
0 answers

Barba JS .mouseenter doesn't work after page transition

I've been experimenting with the Barba JS library and have run into a problem. I'm using a div as a cursor, when hovering over an article thumbnail the cursor expands into a button. For this I'm using JQuery .mouseenter and .mouseleave in a .js…
JLK
  • 11
  • 1
0
votes
1 answer

Page transition animation in framer motion (React)

As title says i wanna do a page transition like https://allhero.co.jp with framer motion in React Js i tried: .anim-page{ &,._red{ position: fixed; top: 0; width: 100%; height: 100%; z-index:999; } …
A.Anvarbekov
  • 955
  • 1
  • 7
  • 21
1
2
3