How to animate a whole page in one click

To animate your TeleportHQ site in one step, press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the command palette, choose Animate current page or Animate all pages, review the list and confirm. Headings slide up gently, images and buttons fade in, and card lists cascade as visitors scroll to them. Nothing else on your pages changes, and one Undo removes everything.

Before you start#

• You need a role that can edit components. The command palette also needs permission to change project settings.
• The command palette isn't available on narrow screens, such as a phone or a small browser window.
• Be in the design view (not the code view), with a page open.
• Nothing is saved until you confirm, and this feature doesn't use AI tokens.
• It works in website and web app projects alike. A website stays a website.

Steps#

1. In the editor, press Ctrl+Shift+P (Cmd+Shift+P on Mac). In Firefox, press Ctrl+Alt+P (Cmd+Option+P on Mac). The command palette opens with its list of commands. You can also press Ctrl+P (Cmd+P) and type >.
2. Click Animate all pages, or Animate current page to animate only the open page. (With a component open, the command reads Animate current component.) A window shows Checking your pages while TeleportHQ looks at what each page contains.
3. Read the review screen. It says how many elements would get an entrance, for example "24 elements across 5 pages would get a gentle entrance as the visitor scrolls to it." Each page shows N to animate or Nothing to add, and a Not included list explains any page that was skipped.
4. Click Animate 5 pages (or Animate 24 elements). Keep the browser tab open until it finishes.
5. On the Your pages are animated screen, check the notes about elements that were left alone, then click Done.

To leave without changing anything, click Cancel on the review screen.

Check that it worked#

On the TeleportHQ canvas, each new entrance plays once as soon as its element shows. To see the entrances wait for the scroll, as visitors do, open Preview and scroll down the page. See How to preview your site before publishing.

Undo the animations#

Every animation from one run is removed with a single undo:

• On the Your pages are animated screen, click Undo. The button works while this run is still your latest change.
• Or, after you close the window, press Ctrl+Z (Cmd+Z) before making other changes. The whole run is one step in your undo history. See How to undo and redo changes.

What changes, and what doesn't#

• Your content is wrapped in Motion elements. The review screen says: "This only wraps existing content in Motion elements. No styles, text, data or pages are changed, and a single undo removes every one of them."
• Text, such as headings and paragraphs, gets a short upward slide, and images, buttons and most other content a plain fade. Card lists cascade one card after another.
• You can change any of these entrances afterwards, like any Motion element. See How to create advanced animations with the Motion element.
• The header, navigation and footer, full-width sections, hidden elements and elements that are already animated are left alone. Admin panel pages are not included.
• Visitors whose device asks for reduced motion see the content in place, without the entrances. See What do visitors who turn on reduced motion see?

Troubleshooting#

"Your current role does not have permission to edit components" Your role can't make this change. Ask a workspace owner or admin to run it, or to change your role.

"This project is read-only, so nothing here can be animated." You're viewing a project you can't edit. See How to ask for editing rights on a view-only project.

"Switch back to the design view to animate pages." You're in the code view. Switch back to the design view and run the action again.

"Open a page or a component first, then run this again." Open a page on the canvas, then run Animate current page again.

"There is nothing here that would benefit from an animation." Everything on the page is already animated, or is content this action leaves alone, such as the header or footer.

Some pages say "Left for a second run — this one reached its limit" One run animates up to 300 elements. Run Animate all pages again to continue.

"N elements were animated, but N checks did not pass. Undoing is the safest next step." Some animations may not look right. Click Undo, then check your pages in Preview before trying again.

"Your project is still generating. Please wait for it to finish before publishing." The AI is still building your site. Wait until it finishes, then run the action again.

"Something went wrong while checking the pages. Nothing was changed." or "The animations could not be saved. Nothing was changed." No changes were made. Refresh the editor and try again.