score:7
the culprit is the exitbeforeenter
prop on on animatepresence
. removing the prop fixes the hash id navigation but breaks some of my use-case.
if set to true,
animatepresence
will only render one component at a time. the exiting component will finish its exit animation before the entering component is rendered. - framer-motion docs
i couldn't just remove the exitbeforeenter
prop as i had included it to fix a bug i had where targeting a node in the entering page collided with the identical one in the old instance of the exiting page. for example a ref
logic on an animated svg header in the exiting page colliding with the entering page's header svg ref logic.
to get the best of both worlds, using the onexitcomplete
that "fires when all exiting nodes have completed animating out", i passed it a callback that checks for the hash from the widow.location.hash
and smooth scrolls to the id using scrollintoview
note: onexitcomplete
is only effective if exitbeforeenter
prop is true
.
// pages/_app.tsx
import { appprops } from 'next/app';
import { userouter } from 'next/router';
import { animatepresence } from 'framer-motion';
// the handler to smoothly scroll the element into view
const handexitcomplete = (): void => {
if (typeof window !== 'undefined') {
// get the hash from the url
const hashid = window.location.hash;
if (hashid) {
// use the hash to find the first element with that id
const element = document.queryselector(hashid);
if (element) {
// smooth scroll to that elment
element.scrollintoview({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
});
}
}
}
};
const myapp = ({ component, pageprops }: appprops): jsx.element => {
const router = userouter();
return (
<animatepresence exitbeforeenter onexitcomplete={handexitcomplete}>
<component {...pageprops} key={router.route} />
</animatepresence>
);
};
export default myapp;
live codesandbox here.
ps: for some reason the the window.location.hash
in the sandbox preview is always an empty string, breaking the hash navigation but opening the preview in a separate browser tab works like a charm.
Source: stackoverflow.com
Related Query
- How to Navigate and Scroll to an Element with ID in a Next.js Page wrapped with AnimatePresence
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to stick title of scrollable content and when the content gets over title too should scroll and then happens with next scroll content
- How can I use scroll into view from different/other page with react and redux?
- How to scroll to an element with hooks/functions?
- How to nest Scene and navigate with direction='vertical' in React Native Router Flux?
- How can I make my input field prefilled with data and editable on page load?
- how can injection dynamic html element to page with next.js?
- How to fetch data on page load and then on button click with useEffect
- Scroll to element on page load with React Hooks
- How to send POST and refresh page with React?
- How to check if parent element include children with spesific class with useEffect and UseRef?
- How can I specify authentication globally instead of defining on every page in Next js, I am using next-auth package with react query
- How to start at the bottom of a page and scroll upwards in reactJS
- How to use react-redux with next js and class components
- How to add event listener to the div element accessed with ref using react and typescript?
- How to drag and drop canvas web element with selenium in chrome
- How to style material ui next components with styled components and SASS
- How to add active class to link with current page and locale?
- How to scroll with mouse wheel and keyboard on vertical slider in echarts?
- How to pass a variable with text and a link into a React element
- selected element move up and down, but scroll behavior is not working with
- How to add html i tag with next and previous button in react-pagination package
- Gatsby syncing the table of contents with the page scroll and style the active link
- How to change the state when going to previous or next page with React?
- How can i use useParams() with an onClick button to navigate to different pages and display the data in react.js?
- How to communicate with Shopify Storefront and add JS snippet to Product Page
- How to open new page and scroll to id leaving the URL unaffected?
- How can I shuffle an array of objects on page render and map over the shuffled array without console warning of "two children with the same key"?
- How to go to another page without keeping scroll position with React
More Query from same tag
- Material UI First Tab not showing up
- Unable to update a particular class in ReactJs
- Why are all my child components re-rendering despite having keys?
- Set component state, from unreachable variable
- handleChange event Typescript
- React method return value won't show in render()
- Why won't react component rerender when state is updated?
- How to display data(images) from a local Json file
- HTML to jsx converter not preserving css units
- Ant Design - Modal with Datepicker (form)
- (REACT)Buttons in popup container cause whole container to dissapear
- Setting a default value on a react select dropdown that is populated from an API call
- Cannot find module 'react' in IE only
- Why bolding a specific characters of a string does not render <b> element in React js?
- Directly access react router route on Wordpress hosted app
- Whitespace validation in reactjs
- ReactJS - Pass post data to the server
- passing down props with React server side rendering
- Simplify toggle and setState updated item's property
- React Router ScrollToTop not working with Material UI
- how to let component rerender during props change
- How to do filteration in AWS Amplify GraphQL Client
- React keys - rendering 2 duplicate items in a list- how to avoid same key warning as same items are intended without using index as key?
- How NOT to pass click event to the children in react?
- How do I remove the international option in React Phone Number Input?
- Regex to validate size units like 10,10Gi,10.5Mi,10Ki?
- Etherjs "window" object not accessible in Next.js
- REACTJS Add a condition to .map to check if the element is contained in an array
- React typescript typings not working
- React state behavior