How to add page transitions to your site
In TeleportHQ, a page transition is how your site moves from one page to the next when a visitor clicks a link: for example, the new page fades in over the old one. To add one, click the Project settings cog at the bottom of the left sidebar, open Page transitions and click a card such as Fade or Slide up. It saves at once and applies to every page of your site.
Before you start
- Page transitions play in Preview and on your published site. The TeleportHQ editor's canvas never plays them, so each card in the list shows a small demo instead.
- Your site may already have one. When the AI Website Builder finishes a site, it can pick a page transition for it, unless you chose one first.
Steps
1. Open Page transitions
- In the editor, click the Project settings cog at the bottom of the left sidebar.
- Under Appearance, click Page transitions. A drawer opens beside the panel.
The Page transitions drawer has three parts:
- The highlighted card: the transition your site uses now. The other cards under Page transition are the ones you can switch to.
- The settings column: Timing, Options and Pictures for the highlighted card, titled after it (for example Fade settings).
- Open preview: opens your site in a new tab, where the transition really plays.
2. Choose a transition
- Under Page transition, click a card, for example Slide up. The card is highlighted and plays its demo. There's no Save button: the change is saved straight away.
- In the settings column, under Timing, pick a Speed: Snappy, Balanced (the default) or Smooth. Speed applies to every page transition on the site.
- If the card has Options, choose them, for example Distance: Subtle or Bold for a slide. The table below lists every card and its options.
3. Try it
- At the top of the drawer, click Open preview. Your site opens in a new tab.
- In the preview, click a link to another page of your site, for example a page in your menu.
The transitions you can choose
| Group | Card | What visitors see | Options |
|---|---|---|---|
| None | Pages switch instantly, with no transition. | ||
| Dissolve | Fade | The page dissolves into the next one. | |
| Dissolve | Crossfade | A fade with a slight change of size. | |
| Dissolve | Blur | The page melts through a blur into the next. | Softness: Light or Heavy |
| Move | Slide up, Slide down | The page lifts away (or drops away) and the next one moves into place. | Distance: Subtle or Bold |
| Move | Slide left, Slide right | Pages travel left, like turning forward, or right, like turning back. | Distance: Subtle or Bold |
| Move | Stack | The old page sinks back and the new one slides in on top. | Depth: Subtle or Bold |
| Scale | Zoom in, Zoom out | You move into the next page, or step back to see it. | Amount: Subtle or Bold |
| Reveal | Wipe down, Wipe up, Wipe left, Wipe right | The next page is revealed from one edge to the other. | |
| Reveal | Circle | The next page grows in a circle. | Starts from: Where you clicked or Centre |
| Cover | Cover | A coloured panel sweeps up over the page and away. | Colour |
| Cover | Curtain | Two coloured panels close over the page and part on the next one. | Colour |
| Custom | Design your own | Your own timing and movement. See How to design your own page transition. |
The Colour of Cover and Curtain is your brand colour (your theme's primary colour) until you change it. Click the swatch to pick any colour, type a hex code such as #2b1d16, or pick one of your project's saved colours from the drop-down at the end of the row.
Check that it worked
In the preview tab, click a link to another page of your site. The old page leaves and the new one arrives with your transition. Click the browser's back button: slides, wipes, zooms and Stack play the other way. If a preview tab was already open before you changed the transition, update it first. See How to preview your site before publishing.
Your live site gets the transition the next time you publish. See How to publish your site.
Troubleshooting
Nothing moves when I switch pages in the editor That's expected: the TeleportHQ canvas switches pages instantly. Use Open preview to see the transition.
The first page appears without a transition That's by design. The page a visitor opens first appears normally; the transition plays when they move to another page.
Clicking a link to a section of the same page doesn't play it A page transition only plays when the page changes. Links that scroll to a section, or that only change the end of the address (such as a filter), never replay it.
One page appears instantly while the others transition That page, or a folder it's in, is set to skip the transition. See How to turn off the page transition for one page or folder.
Good to know
- To turn transitions off, click the None card. Pages then switch instantly.
- Reduced motion: visitors who turned on "reduce motion" on their device get instant page changes, with no transition and no flying pictures. See What do visitors who turn on reduced motion see?
- Flying pictures: with any transition on, a picture inside a link can fly into the same picture on the next page. It's on by default. See How to make a picture fly to the next page.
- Web apps with the Dashboard layout never play a page transition: their screens switch instantly, whatever the setting.
- Downloads: the Next.js and HTML downloads play your page transition. React, Vue, Nuxt and Angular downloads keep the same pages without it. See How to download your site as code.
- The AI Assistant can set it for you. Ask, for example, "Use a slide-up page transition at a snappy speed." See What can the TeleportHQ AI Assistant do?
- For other kinds of animation, such as elements that fade in as visitors scroll, see Which animation options does TeleportHQ have?