Smooth Page Transitions in Framer

Key Concepts:

• Page Transitions in Framer
• Cohesive Animations
• Subtle Animations
• Clear Animations (Avoiding Disorientation)
• Exit Animations
• Enter Animations
• Transition Timing (Duration, Delay)
• Opacity
• Scale
• Offset (Y-axis)
• Page Effects (Excluding Elements from Transitions)
• Templates
• Variables
• Persistent Navigation

1. Core Principles for Page Transitions:

• Cohesive: Transitions should fit within the overall design system and animation style of the website. They should feel like a natural part of the site.
• Subtle: Animations should be understated and elegant, adding delight without overwhelming the user experience or slowing them down.
• Clear: Avoid disorienting users, especially with directional movements. Maintain a sense of flow and consistency. For example, if navigating forward uses a left-to-right animation, navigating back should use a right-to-left animation.

2. Setting Up Page Transitions in Framer (All Pages):

• Go to the desktop breakpoint of the starting page.
• Navigate to the "Effects" panel.
• Choose "All Pages" to apply the transition globally. "Single Page" allows for page-specific transitions, useful for dynamic directional effects.
• Framer starts with a default crossfade transition.

3. Enhancing a Simple Fade Transition:

• Goal: Create a smoother, more elegant fade effect.
• Process:
  • Add an "Exit" animation to the outgoing page.
  • Set the "Opacity" to 0 for the exit animation, causing the page to fade out.
  • Adjust the "Transition" settings for both "Exit" and "Enter" animations.
  • Increase the "Transition" duration to 1 second for a smoother fade.
  • Add a "Delay" of 0.5 seconds to the "Enter" animation. This ensures the new page only starts fading in after the old page has completely faded out, avoiding a crossfade effect.
• Rationale: Fading out the content completely before fading in the new content creates a cleaner and more polished transition.

4. Creating a Motion-Based Transition (Slide Up and Scale Down):

• Goal: Introduce more motion and dynamism to the transition.
• Process:
  • Duplicate the existing fade transition setup as a starting point.
  • Modify the "Exit" animation:
    • Keep the "Opacity" fade to 0.
    • Add a "Scale" effect to shrink the outgoing page.
    • Add an "Offset Y" effect and set it to 100%. This pushes the content down to 100% of the browser height as it shrinks.
  • Modify the "Enter" animation:
    • Set the initial "Opacity" to 100% (no fade-in needed, as it will slide up).
    • Set the initial "Offset Y" to 100%. This starts the incoming page from the bottom of the screen.
  • Remove the "Delay" from the "Enter" animation.
  • Leave the "Transition" duration at 1 second.
• Result: The outgoing page scales down and moves down, while the incoming page slides up from the bottom.

5. Excluding Elements from Page Transitions (Persistent Navigation):

• Goal: Keep a navigation bar persistent during page transitions.
• Process:
  • Select the navigation element (using a template in Framer).
  • Go to "Styles" and add a "Page Effect."
  • Set the "Page Effect" to "Exclude." This prevents the navigation from participating in the page transition animation.
• Rationale: A persistent navigation bar provides a sense of continuity and helps maintain user orientation.

6. Addressing Background Color Issues During Transitions:

• Problem: Text color visibility can be affected during transitions if the page background changes.
• Solution:
  • Set a default background color in the template (e.g., a light gray) to ensure text remains visible during transitions.
  • Ensure that the page content also has a background color set (e.g., white) to override the default background when the page is fully loaded.
• Note: The Framer canvas color is used as the background in the preview, but the published site will use the defined background color.

7. Key Quotes/Statements:

• "It's really important that your transitions between pages actually fit within the system that you've created with other admissions on your site and just generally feel like it should be part of your site."
• "I think that all animations and transitions feel the best when they're understated and just like elegant I think you should add a bit of delight and not overtake the experience or slow users down."
• "You just want to make sure you don't lose a sense of flow."
• "Time is definitely like all about perception of time."

8. Synthesis/Conclusion:

The video provides a practical guide to creating effective page transitions in Framer, emphasizing the importance of cohesive, subtle, and clear animations. It demonstrates how to enhance basic fade transitions and create more dynamic motion-based effects. A key takeaway is the ability to exclude elements like navigation bars from transitions to improve user experience. The video also addresses potential issues with background colors during transitions and offers solutions to ensure text visibility. By following these principles and techniques, designers can create page transitions that are both visually appealing and user-friendly.