Page transitions

How to make a picture fly to the next page

October 11, 2026
How to make a picture fly to the next page

In TeleportHQ, a picture can fly from one page into the next while the page transition plays: a card's photo moves and grows into the large picture at the top of the page it opens. It happens by itself when a picture is inside a link to another page of your site and that page shows the same picture. It's on by default; the switch is Fly to the next page, under Pictures in Project settings → Page transitions.

Before you start

Steps

1. Check that flying pictures are on

  1. In the editor, click the Project settings cog at the bottom of the left sidebar.
  2. Under Appearance, click Page transitions.
  3. In the settings column on the right, under Pictures, check that Fly to the next page is switched on.
The settings column of the TeleportHQ Page transitions drawer with the Fly to the next page switch under Pictures highlighted

2. Link the picture to the next page

  1. On the canvas, select the picture, or the card that holds it, for example a photo of a sourdough loaf.
  2. In the small bar above the selected element, click the link icon.
  3. On the Page tab, click the page it should open, for example Breads.

See How to add links and buttons for the link panel.

3. Show the same picture on the next page

  1. Open the page the link goes to.
  2. Add the same picture there, for example as the large picture at the top of the page. Pick the same image from the Assets Manager, so both pictures have the same address. See How to add and replace images.

Select the linked picture again and click the link icon. At the bottom of the link panel, above Search Parameters, a line says This picture flies to Breads. If it isn't there, see Troubleshooting below.

Check that it worked

Click Open preview at the top of the Page transitions drawer, or Preview in the bottom toolbar. In the preview tab, click the linked picture. The picture moves and grows into its place on the next page, while the rest of the page changes with your transition. A picture with a different shape is cropped to fit, never stretched. Your live site gets it the next time you publish.

Troubleshooting

The link panel doesn't say "This picture flies to …" TeleportHQ shows the line only when everything below is true:

  • A page transition is chosen, and Fly to the next page is on.
  • The link goes to a page of your site (the Page tab), not to a web address.
  • The first picture inside the link is a fixed picture, not one filled in from a data source.
  • The page it opens shows a picture with the same address.
  • The page it opens doesn't skip the page transition. See How to turn off the page transition for one page or folder.
  • The project isn't a web app with the Dashboard layout: those never play page transitions.

The picture doesn't fly for a visitor The page then plays your normal transition instead. That happens when the visitor goes back with the browser's back button, when their browser can't fly pictures between pages, or when they turned on "reduce motion" on their device (then the page changes instantly).

Good to know

  • Pictures from a data source can still fly. In a list of products or posts that links to a details page, each item's picture flies into the same picture on its details page on your live site. The link panel can't confirm it in advance, because the address comes from your data. See How to create a page for each item (details pages).
  • Clicking the card's title works too, when the card's picture links to the same page.
  • To turn it off, switch Fly to the next page off. Pages then play only the transition.
  • Reduced motion: visitors who turned on "reduce motion" see no flying pictures and no transition. See What do visitors who turn on reduced motion see?
  • Downloads: the Next.js and HTML downloads keep flying pictures; React, Vue, Nuxt and Angular downloads don't play page transitions.
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 add links and buttons

In TeleportHQ, you make any text, image, button or container clickable by selecting it and clicking the link icon above it, then choosing a URL, a page of your site, a section to scroll to, an email address or a phone number.

How to add and replace images

In TeleportHQ, you add an image with the Image element or by dragging an uploaded file onto the page, replace it by selecting the image and picking another file in the Assets Manager, and crop, adjust, add text, remove the background, edit with AI or resize it with Edit image.

How to create a page for each item (details pages)

In TeleportHQ, you give every item in a list its own page, like /products/blue-shirt, by opening a page's menu in Pages, Components & Tree View, turning on Is Details Page, choosing the list in Select Source, and designing the page once with elements bound to the current item.

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.