ryanwiemer / gatsby-using-page-transitions Goto Github PK

View Code? Open in Web Editor NEW

94.0 4.0 12.0 473 KB

Gatsby example site using page transitions

Home Page: https://transitions.netlify.com/

License: MIT License

JavaScript 42.85% CSS 57.15%

gatsby page-transitions framer-motion

gatsby-using-page-transitions's People

Contributors

Stargazers

Watchers

Forkers

oriolcastro giumagnani elrumordelaluz jwrighty yoeldirar madebylance monoclefox anthonykasabian sudokud el-j nicubarbaros pheonixork

gatsby-using-page-transitions's Issues

Children Animations Are Not Delayed

Issues created on the Framer Motion repo regarding this topic:

framer/motion#294
framer/motion#305

How to remove first delay transition?

Hi! 👋
(please, excuse my english)
I'm using your example, great btw, for one of my projects and I have an issue. When load the page, the first transition, there is a delay before animation starts. I edited your code and changed duration from 0.5 to 3, so you can see the problem with long start animations.

Do you know how to remove this delay?

Thanks!

Variant Exit not working.

The initial and enter work perfectly. Unfortunately, the fade-out before going to another page does not happen. Any idea what might be causing that?

AnimateSharedLayout Transition?

Hi! Thank you for putting this together.

I was wondering if you've tried and could potentially share an example of create page transitions in Gatsby with Framer's AnimateSharedLayout?

Scroll position lost on pop state (when clicking browser back/forward buttons)

Hey @ryanwiemer — I've been using bits of your code from this example to implement page transitions on my Gatsby projects and it works great!

I've noticed in the last few months is that scroll restoration no longer works on popstate, despite this logic:

gatsby-using-page-transitions/gatsby-browser.js

Lines 10 to 24 in c4a5226

 export const shouldUpdateScroll = ({ 

 routerProps: { location }, 

 getSavedScrollPosition 

 }) => { 

 if (location.action === "PUSH") { 

 window.setTimeout(() => window.scrollTo(0, 0), transitionDelay); 

 } else { 

 const savedPosition = getSavedScrollPosition(location); 

 window.setTimeout( 

 () => window.scrollTo(...(savedPosition || [0, 0])), 

 transitionDelay 

 ); 

 } 

 return false; 

 };

I was wondering if you'd come across that issue and had any thoughts on a workaround.

Possibly related to this issue: gatsbyjs/gatsby#23842 ?

ryanwiemer / gatsby-using-page-transitions Goto Github PK

gatsby-using-page-transitions's People

Contributors

Stargazers

Watchers

Forkers

gatsby-using-page-transitions's Issues

Children Animations Are Not Delayed

How to remove first delay transition?

Variant Exit not working.

AnimateSharedLayout Transition?

Scroll position lost on pop state (when clicking browser back/forward buttons)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export const shouldUpdateScroll = ({
	routerProps: { location },
	getSavedScrollPosition
	}) => {
	if (location.action === "PUSH") {
	window.setTimeout(() => window.scrollTo(0, 0), transitionDelay);
	} else {
	const savedPosition = getSavedScrollPosition(location);
	window.setTimeout(
	() => window.scrollTo(...(savedPosition \|\| [0, 0])),
	transitionDelay
	);
	}
	return false;
	};