Flow component » Custom transitions

Custom transitions

Want more? You’re not limited to the built-in flows. You can make your own transitions.

You could, for instance, create a showOverlayCenter() with a darker background, one that’s 80% opaque instead of the default 50%.

alt_showOverlayCenter = (nav) ->
    overlay:
        show:
            options:
                time: 0.1
            opacity: .8
            x: 0
            y: 0
            size: nav.size
…
Download Framer project
A darker version of showOverlayCenter()

The most basic custom transition

Let’s start with the simplest example: one that fades in the next screen.

First you define your new transition:

# Simple fade transition
fadeTransition = ->
    layerB:
        show:
            opacity: 1
        hide:
            opacity: 0

And then you can use it with the transition() function. Here we animate to screen_2:

screen_1.onTap ->
    flow.transition screen_2, fadeTransition
Download Framer project

This transition() function needs the layer to transition to (as always), followed by that custom transition you made (here fadeTransition).

The most basic transition: layerB fades in

The transition you created is a function (note the ->) that contains show and hide states for the screens you want to animate.

Take into account that you have to use these names for the screens:

  • layerA — The current screen
  • layerB — (mandatory) The screen we’re showing
  • overlay — The transparent gray background

Screens you omit will not be animated.

So when you don’t provide show and hide states for layerA, it will simply not move. (This is how it works with the built-in overlays.)

And when you don’t provide details for overlay, it will stay invisible (as it is in the basic showNext() flow).

Which makes our example the most simple custom transition you could make. We animate the opacity of layerB to 1 in its show state and fade it out again in its hide state.

Animation options

Animation options like time, curve, and the other usual suspects can be added as options.

As an example, this is how our fade transition would take 5 seconds to show the new screen, but only half a second when returning to the previous screen:

fadeTransition = ->
    layerB:
        show:
            opacity: 1
            options:
                time: 5
        hide:
            opacity: 0
            options:
                time: 0.5

Ah, by the way, to return you use showPrevious(), as always. It will automatically use your custom animation.

Optional arguments for the transition function

If you want to have access to the layers’ properties inside your function, you can add them as arguments, like this:

customTransition = (nav, layerA, layerB, overlay) ->

You might be wondering what ‘nav’ is. That’s the FlowComponent itself.

In the built-in overlay transitions, for instance, nav is always used to make overlay fit the size of the FlowComponent:

Transitions.overlayCenter = (nav, layerA, layerB, overlay) ->
    transition =
        # …
        overlay:
            show:
                options:
                    time: 0.1
                # …
                size: nav.size

An example with the transparent background

In the following not-very-useful-but-hopefully-educational examples, the screens are shown next to each other.

In this first one, the show state for overlay gets a delay (in its options) and is animated to an opacity of 1, so that you can see its true color: black.

transitionWithBackground = ->
    # …
    overlay:
        show:
            options:
                curve: Spring(damping: 0.5)
                time: 0.5
                delay: 1
            opacity: 1
            width: Screen.width / 2
            height: Screen.height / 2
            x: Screen.width / 4
            y: Screen.height / 4
        # …
    # …
Download Framer project

And the hide state for layerA also got a delay, so that the three animations run one after the other instead of simultaneously.

Notice that on the showPrevious(), screen 2 (layerB) is made invisible again only after the transition has finished. (Normally you would animate this screen’s opacity or position.)

A (very) custom transition that also sets overlay

An example with only the current and next screen

This transition is identical to the former one, but with overlay omitted.

# Custom transition without Background
customTransition = ->
    layerA:
        hide:
            options:
                curve: Spring
                time: 0.5
                delay: 0.5
            width: Screen.width / 2
            height: Screen.height / 2
        show:
            size: Screen.size
    # …
Download Framer project

Note that screen 1 (layerA) is now hidden at the end of the transition, and is only made visible again at the start of the showPrevious().

A custom transition without overlay

Recreating the built-in flows

I’ll give you something to start with when you want to make transitions that are almost like the included ones. This next prototype contains custom transitions that are copies of the built-in flows.

Creating them was easy: I just copy/pasted the code from the FlowComponent’s source code on GitHub. (They’re at the end of that CoffeeScript file.)

By the way, the default transitions all use the same classic spring curve: "spring(300, 35, 0)", and the overlay is always 50% opaque.

But again, you can tweak all of that.

button_show_next.onTap ->
    flow.transition screen_2, transition_showNext
button_overlay_top.onTap ->
    flow.transition Overlay,
        transition_showOverlayTop
        wrap: no
…
Download Framer project

Disabling automatic wrap

Besides scroll and modal, there’s one more argument that you can add when transitioning to a screen: wrap. (It’s not in the docs.)

For some reason, wrap needs disabling when you animate to a smaller screen with a custom transition. That’s why it’s set to no for the overlays in this prototype.

Copies of the six built-in transitions