Page Transition

Control navigation flow with animated exit and entry, loader sync, and media cleanup during route changes.

Location

• Located in src/themes/reactwp/js/inc/PageTransition.js

How It Works

The module uses React Router useBlocker to intercept internal navigation.

On navigation:

• Play exit animation
• Reset scroll position
• Clear previous medias (images, videos, audios)
• Restart loader download and display
• Proceed to the new route when ready
• Play entry animation

Exit animation

Triggered when navigation is blocked before route change.

Find and replace this timeline:

tl
.to('#viewport', .2, {
	opacity: 0,
	pointerEvents: 'none'
});

Entry animation

Triggered after the new route is loaded and loader display is resolved.

Find and replace this timeline:

tl
.to('#viewport', .2, {
	opacity: 1,
	pointerEvents: 'initial'
});