#Navigation

Navigation in Framer is built on top of the Framer API. Learn how to customize and create flows easily.

Expressing flows is an important part of the prototyping process, and easy to set up in Framer. Continue reading to learn how to set up your own flows, or create something new for your project.

Note: The recommended way to navigate from code is to instead add an EventHandler property control to a code component.

#useNavigation

Navigating your prototype can be handled through code. The useNavigation() hook can be called from a component or a code override.

import * as React from "react"
import { useNavigation } from "framer"
export function Button() {
  const navigation = useNavigation()
  return (
    <button
      onClick={() => {
        navigation.goBack()
      }}
    />
  )
}

#Transitions

All of the transitions in the Framer UI are also available from code. All transitions require a ComponentInstance as the first argument other than the goBack() transition.

// Only supported in (Deprecated) Framer Desktop
import { ComponentInstance } from "./canvas"

Certain transitions can also accept more arguments to customize it’s behavior. Continue reading to learn more about the properties that can be customized.

Note: The transitions below (with the exception of goBack) require a Component Instance in order to function properly.

Importing components into code is not supported on Framer Web, and only works with (now deprecated) Design Components.

We will be brining this functionality to Framer Web and Smart Components in the near future.

#Go Back

goBack() shows the previous screen, using the original transition that was used to navigate to the current screen.

navigation.goBack()

#Instant

instant() shows the next screen instantly.

// Only supported in (Deprecated) Framer Desktop
navigation.instant(<Component />)

#Fade

fade() brings the user to the next screen by fading out the current screen and fading in the next.

// Only supported in (Deprecated) Framer Desktop
navigation.fade(<Component />)

#Push

push() brings the user to the next screen by pushing the current screen out of view with the next.

You can customize which way the screen pushes through the appearsFrom property. Set to right by default.

// Only supported in (Deprecated) Framer Desktop
navigation.push(<Component />)
navigation.push(<Component />, { appearsFrom: "top" }) // optional

#Modal

modal() fades in the next screen on top of the current screen in the center.

You can customize the backdrop color through the backdropColor property. Set to rgba(4,4,15,0.4) by default.

// Only supported in (Deprecated) Framer Desktop
navigation.modal(<Component />)
navigation.modal(<Component />, {
  backdropColor: "rgba(4,4,15,0.4)",
}) // optional

#Overlay

overlay() pushes the next screen on top of the current screen.

You can customize which way the screen pushes through the appearsFrom property, and the backdrop color through the backdropColor property. Set to right and rgba(4,4,15,0.4) by default.

// Only supported in (Deprecated) Framer Desktop
navigation.overlay(<Component />)
navigation.overlay(<Component />, {
  appearsFrom: "left",
  backdropColor: "rgba(4,4,15,0.4)",
}) // optional

#Flip

flip() shows the next screen by flipping the current screen 180 degrees.

You can customize which way the screen flips through the appearsFrom property. Set to right by default.

// Only supported in (Deprecated) Framer Desktop
navigation.flip(<Component />)
navigation.flip(<Component />, { appearsFrom: "right" }) // optional

#Custom Transitions

Not only can you use the built in default transitions, but you have the ability to create your own.

#Custom Transition

customTransition() allows you to design and customize the flows your users will experience through your prototypes.

All built-in transitions are defined using the same API as custom transitions. The definition contains eight properties which are all optional.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(
  <Component />,
  userTransitionDefinition
)

#position: NavigationTransitionPosition

Defines the position and size of the incoming screen wrapper. Defaults to top, right, bottom, and left of 0.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  position: { top: 0, right: 0, bottom: 0, left: 0 },
})

#animation: Transition

Animation options that set the transition properties for the animation.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  animation: {
        type: "spring"
        stiffness: 300,
        damping: 100,
    }
})

#overCurrentContext: boolean

Defines whether the incoming screen should render over the current context, like an overlay or modal. Defaults to false.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  overCurrentContext: true,
})

#backdropColor: string

Defines the backdrop color when the incoming screen is rendered over the current context. Defaults to rgba(4,4,15,0.4).

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  backdropColor: "rgba(4,4,15,0.4)",
})

#goBackOnTapOutside: boolean

Defines whether a tap in the background should dismiss the screen presented over the current context. Defaults to true.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  goBackOnTapOutside: true,
})

#backfaceVisible: boolean

Defines whether the backface of the incoming and outgoing screens should be visible, necessary for certain 3D transitions. Defaults to true.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  backfaceVisible: true,
})

#enter: Partial<FrameProps>

Defines the beginning state of the incoming screen wrapper.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  enter: { y: "100%", scale: 0 },
})

#exit: Partial<FrameProps>

Defines the end state of the outgoing screen wrapper.

// Only supported in (Deprecated) Framer Desktop
navigation.customTransition(<Component />, {
  exit: { y: "100%", opacity: 0 },
})