SSGOI

drill

Drill gives parent-to-child navigation the push/pop language familiar from mobile navigation stacks.

Drill-in — List → detail, going one level deeper.

When this motion fits

When to use
Use it for a list opening a detail, or any parent route opening one child level.
What moves
The child enters from the side; going back reverses the motion and reveals the parent.
Avoid when
Avoid it for peer tabs, filters, or destinations with no parent-child relationship.

Add it to a route rule

drill() sets the motion; the rule around it decides which navigations get it. The config shape is the same in every framework.

import { drill } from "@ssgoi/react/view-transitions";

const config = {
  transitions: [
    {
      on: "/products/**",
      except: "/products",
      transition: drill(),
    },
  ],
};

Pattern forms, priority and the scroll defaults that come with each rule shape are on Route rules.

Configurations

type, variant and option are independent. Each clip is recorded from a demo published on ssgoi.dev. Combinations without a published demo keep the API details without a substitute clip.

  • parallax

    type: parallaxdefault

    The child slides over the parent while the parent recedes slightly. This layered depth makes hierarchy easiest to read.

    A product list recedes while its detail page slides in, then reverses back to the list.
    drill({ type: "parallax" })

    Open live demo 1 · Open live demo 2Opens at the source screen

  • slide

    type: slide

    Both pages move on one flat plane. Choose it when the parent-child relationship is clear without extra depth.

    A search result page slides flat into its child page and back without parallax.
    drill({ type: "slide" })

    Open live demoOpens at the source screen

Agent guide: /llms/transitions/drill.txt — every prop, the required markup, and a config fragment as plain text.

Read next