Page transitions

How to design your own page transition

October 11, 2026
How to design your own page transition

In TeleportHQ, when none of the ready-made page transitions fits, choose Design your own and set every value yourself: how long the page change takes, how it speeds up and slows down, and how the new page looks when it arrives and the old page when it leaves (opacity, position, size and blur). Click the Project settings cog at the bottom of the left sidebar, open Page transitions, and click Design your own at the bottom of the cards.

Before you start

  • Read How to add page transitions to your site first: it explains where page transitions play and how to try them.
  • Your site has one page transition at a time. Design your own replaces the card you had before, on every page.
  • Every value saves as you change it; there's no Save button. To go back to a ready-made transition, click its card.

Steps

1. Choose Design your own

  1. In the editor, click the Project settings cog at the bottom of the left sidebar.
  2. Under Appearance, click Page transitions.
  3. Scroll the list of cards to the bottom. Under Custom, click Design your own.
The bottom of the TeleportHQ Page transitions list, with the Design your own card under Custom highlighted

The settings column on the right is now called Design your own settings. Below Pictures, it has four groups:

  1. Start from: fills every value from a ready-made transition.
  2. Timing: Duration (s) and Easing.
  3. The new page arrives: how the new page looks when it starts to appear.
  4. The old page leaves: how the old page looks when it has gone.
The Design your own settings in TeleportHQ with 1 Start from and 2 Timing numbered
The Design your own settings in TeleportHQ with 3 The new page arrives and 4 The old page leaves numbered, each with opacity, offset, scale and blur values

2. Start from a ready-made transition

  1. Under Start from, open Preset.
  2. Pick the transition closest to what you want, for example Slide up. You can pick Fade, Crossfade, Blur, Slide up, Slide down, Slide left, Slide right, Zoom in or Zoom out.

Every value below is filled in from that transition, so you adjust it instead of starting from zero. The Preset field shows empty again afterwards; that's normal.

3. Set the timing

  1. In Duration (s), type how many seconds the change takes, for example 0.5. The longest is 3 seconds.
  2. In Easing, pick how the movement speeds up and slows down: Ease, Ease in, Ease out (the default: starts quickly, settles gently), Ease in and out, Linear (the same speed throughout), Spring, Back or Bounce. Spring, Back and Bounce overshoot a little before they settle.

4. Set how the pages arrive and leave

Under The new page arrives, set how the new page looks at the start. It then moves to its normal look:

  • Opacity at the start: 0 is invisible, 1 is fully visible.
  • Left/right offset at the start (px): how far from its place it starts. A negative number is to the left, a positive number to the right, 0 is in place.
  • Up/down offset at the start (px): a negative number is above its place, a positive number below.
  • Scale at the start: 1 is its real size; 0.9 is slightly smaller, 1.1 slightly larger.
  • Blur at the start (px): 0 is sharp; 12 is a soft blur.

Under The old page leaves, the same five values end in at the end. The old page moves from its normal look to these values, then goes.

For example, for a slow rise: start from Slide up, set Duration (s) to 0.6, then set Up/down offset at the start (px) to 80 under The new page arrives.

Check that it worked

The Design your own card plays your values as you change them. To see the real thing, click Open preview at the top of the drawer, then click a link to another page of your site in the preview tab. Your live site gets the new transition the next time you publish.

Troubleshooting

There's no Speed setting Design your own has no Speed: set Duration (s) instead. Speed belongs to the ready-made cards.

Options such as Distance or Colour are missing Those options belong to the ready-made cards. With Design your own, set the values directly, for example a larger Up/down offset at the start (px) instead of a bold Distance.

A value changed by itself after I typed it Each value has a range: opacity from 0 to 1, offsets from -400 to 400, scale from 0.25 to 2, blur from 0 to 60, duration up to 3 seconds. A number outside the range is brought back inside it.

Good to know

  • Your values are kept. If you switch to another card and later click Design your own again, your values are still there.
  • The back button plays it the same way. Ready-made slides, wipes and zooms play in reverse when a visitor goes back; Design your own plays as you designed it.
  • The two pages take turns. Design your own plays the old page leaving, then the new page arriving. Some ready-made cards bring the new page in over the old one instead, such as Fade, Crossfade, Circle and the wipes, so a design you start from Fade fades the old page out before the new one fades in.
  • Reduced motion: visitors who turned on "reduce motion" on their device get instant page changes instead. See What do visitors who turn on reduced motion see?
  • Flying pictures work with Design your own too. See How to make a picture fly to the next page.
  • The AI Assistant can't design one. It can pick any ready-made page transition for you, but Design your own is set by hand.
Share

Related Articles

How to add page transitions to your site

In TeleportHQ, click the Project settings cog at the bottom of the left sidebar, open Page transitions under Appearance and click a card such as Fade or Slide up; the transition then plays every time a visitor moves from one page of your site to another, in Preview and on the published site.

How to turn off the page transition for one page or folder

In TeleportHQ, right-click a page in the Pages list and switch on Skip page transition (or Skip page transitions on a folder); that page then appears instantly instead of playing your site's page transition, while leaving it still plays the transition.

How to make a picture fly to the next page

In TeleportHQ, when a picture inside a link opens a page that shows the same picture, the picture flies into its place on the next page while the page transition plays; it's on by default, under Project settings → Page transitions → Pictures → Fly to the next page.

What do visitors who turn on reduced motion see?

TeleportHQ sites respect the "reduce motion" setting of a visitor's device automatically; Motion animations show the content in place without moving, rows that slide by themselves stand still and can be swiped, page transitions become instant, and each Scroll Scene and Scroll Video shows what you choose in its Reduced motion setting.

Which animation options does TeleportHQ have?

TeleportHQ animates your site with Motion, in any project and on every plan; use Add motion in the right panel for one element, the Motion element for a group, Animate all pages for the whole site, the Transition section for smooth style changes, Scroll Scenes for scroll stories and Page transitions between pages, plus Lottie files and your own CSS.