Skip to main content

Webflow Page Transitions

Status: ✅ Production Ready
Implemented: January 2025
First Site: reformer.la

🎯 Overview​

Page transitions create smooth, app-like navigation between pages on Webflow sites. This implementation uses Barba.js for page routing and GSAP for animations, following industry best practices inspired by Osmo Supply's upcoming course.

Why Page Transitions Matter​

  • Enhanced UX - Smooth navigation feels more intuitive and less jarring
  • Brand Identity - Unique transitions reinforce brand personality
  • Performance Perception - Well-designed transitions mask loading times
  • Competitive Advantage - Industry standard for award-winning sites

🚀 Quick Start​

Step 1: Add Dependencies to Head Code​

In Webflow Designer → Settings → Custom Code → Head Code:

<script defer src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Important: Use defer attribute for performance (prevents blocking page load).

Copy the complete code from reformer-platform/webflow-embeds/reformer-la-transitions-complete.html and paste into Webflow → Settings → Custom Code → Footer Code.

Step 3: Publish & Test​

  1. Publish your site
  2. Navigate between pages
  3. You should see smooth fade transitions!

📋 Implementation Details​

Architecture​

  • Barba.js - Handles page routing and content swapping
  • GSAP - Handles smooth animations
  • Automatic Setup - Creates wrapper/container elements automatically
  • Performance Optimized - GPU accelerated, mobile optimized

Transition Types​

Fade (Default)

  • Simple opacity fade
  • Fast, universal, safe
  • Best for: General use

Slide

  • Content slides in from direction
  • More dynamic, directional
  • Best for: Navigation menus, directional flows

Scale

  • Content scales in/out
  • Modern, app-like feel
  • Best for: Product pages, galleries

Configuration​

window.initPageTransitions({
  transitionType: 'fade',           // 'fade' | 'slide' | 'scale'
  duration: 0.4,                     // seconds
  restoreScrollPosition: true,       // Restore scroll on back button
  scrollToTop: false,                 // Always scroll to top on new page
  usePrefersReducedMotion: true,     // Respect accessibility
  mobileOptimized: true,             // Faster on mobile
  debug: false                        // Enable console logs
});

🧪 Testing​

Automated Testing​

Run the verification script:

node reformer-platform/scripts/verify-transitions-reformer-la.js

Manual Testing​

  1. Navigate between pages - should see smooth fade
  2. Test back button - scroll position should restore
  3. Test on mobile - transitions should be faster
  4. Check console - no errors

Browser Console Test​

Paste this in browser console on your site:

console.log('Barba:', typeof barba !== 'undefined' ? '✅' : '❌');
console.log('GSAP:', typeof gsap !== 'undefined' ? '✅' : '❌');
console.log('initPageTransitions:', typeof window.initPageTransitions === 'function' ? '✅' : '❌');

All three should show ✅.

🔧 Troubleshooting​

"Barba.js not loaded"​

→ Check Head Code has Barba.js script with defer

"GSAP not loaded"​

→ Check Head Code has GSAP script with defer

"No Barba wrapper found"​

→ Code automatically creates wrapper - check console for errors

Transitions not working visually​

→ Check browser console for errors → Verify scripts loaded (Network tab)

📊 Performance​

Optimizations​

  • ✅ Scripts load with defer (non-blocking)
  • ✅ GPU accelerated animations (transform/opacity only)
  • ✅ Mobile optimized (shorter durations)
  • ✅ Respects prefers-reduced-motion

Benchmarks​

  • Page Load: < 2s (first load)
  • Transition: ~400ms (desktop), ~280ms (mobile)
  • FPS: 60fps during transitions
  • Script Load: < 100ms (with defer)

📚 Files & Documentation​

Code Files​

  • reformer-platform/webflow-embeds/reformer-la-transitions-complete.html - Production code
  • reformer-platform/lib/transitions/page-transitions.js - Core library
  • reformer-platform/webflow-embeds/page-transitions.html - Generic embed

Documentation​

  • reformer-platform/docs/PAGE-TRANSITIONS-IMPLEMENTATION.md - Complete guide
  • reformer-platform/docs/WEBFLOW-PAGE-TRANSITIONS-SETUP.md - Setup instructions

Scripts​

  • reformer-platform/scripts/verify-transitions-reformer-la.js - Verification
  • reformer-platform/scripts/test-transitions-reformer-la.js - Comprehensive test
  • reformer-platform/scripts/browser-console-test.js - Browser test

🎨 Customization​

Change Transition Type​

window.updateTransitionConfig({
  transitionType: 'slide',
  slideDirection: 'right'
});

Adjust Duration​

window.updateTransitionConfig({
  duration: 0.5  // Slower fade
});

Enable Debug Mode​

window.updateTransitionConfig({
  debug: true  // See console logs
});

✅ Success Criteria​

Transitions are working correctly if:

  • ✅ Smooth fade between pages
  • ✅ No page reload/flash
  • ✅ Scroll position restores on back button
  • ✅ Works on mobile
  • ✅ Respects reduced motion
  • ✅ 60fps performance
  • ✅ No console errors

🚀 Multi-Site Rollout​

Current Status​

  • ✅ reformer.la - Implemented and tested
  • 🔄 Other sites - Ready for rollout

Rollout Process​

  1. Add dependencies to Head Code
  2. Add transition code to Footer Code
  3. Publish site
  4. Test transitions
  5. Monitor performance

Per-Client Configuration​

Use webflow-configs/_template-transitions.js to configure transitions per client:

transitions: {
  enabled: true,
  type: 'fade',
  duration: 0.4,
  restoreScrollPosition: true
}

📖 Related Documentation​

🔗 External Resources​

Last Updated: January 2025
Status: ✅ Production Ready
Next: Rollout to additional Reformer client sites