How to capture an animated website interaction

You need to show what happens when someone clicks a button, opens a menu, or scrolls through an animated page. A still screenshot cannot show the sequence, and a phone recording of your monitor can look blurry or shaky.

Record the interaction directly from your browser instead. The Screen Recorder can capture a screen, window, or browser tab, with sound, a microphone, or a camera if you need them.

Record the website interaction

1. Open the Screen Recorder on a computer. Screen Recorder does not work on phones.
2. Choose whether to capture the website's browser tab, the whole browser window, or the entire screen. For a single page, choose its tab if the browser offers that option. This avoids showing unrelated windows or notifications.
3. When the browser's sharing prompt appears, select the website you want to show and confirm sharing. If you need sound from the page, enable tab audio in the prompt when that option is available.
4. Start the recording, return to the website, and perform the interaction at a steady pace. Pause briefly after important changes so viewers can see the result.
5. Stop the recording when you are done, then play it back and check that the animation, clicks, and any needed sound were captured.

Before recording, close private tabs and hide anything you do not want in the video. If you are showing a form, use sample information rather than real names, addresses, or account details.

Choose what to capture

Capture one browser tab

Choose the website tab when the demonstration stays on one page. This keeps the recording focused and may let you include the tab's audio. Some browsers stop sharing a tab if you close it, so leave it open until the recording ends.

Capture a window

Choose the browser window if you need to show the address bar, browser controls, or a website that moves between tabs in that same window. Other open windows stay out of the recording, but anything visible in the selected browser window may appear, including bookmarks and notifications.

Capture the whole screen

Choose the entire screen only if your demonstration needs to move between applications or monitors. The recording can show everything that appears there, so turn on Do Not Disturb or close private windows first. If you use multiple monitors, check which one you selected before recording.

Include sound, microphone, or camera

Include tab audio when the website plays a sound you want viewers to hear. Use the microphone to narrate or explain what you are doing. A camera can add your face to the recording, but it is not needed to show the page itself. Record a short sample first to make sure the levels are clear and the sound source is the one you intended.

Fix common recording problems

1. Choose the website in the sharing prompt. If the recording shows the Screen Recorder page or a blank area, stop and start again. Select the website tab, browser window, or screen you want to demonstrate, then confirm the browser's sharing prompt.
2. Keep the website visible. Some pages pause animation when their tab is hidden or minimized. Keep the captured tab active while you demonstrate, and avoid switching away unless you are recording the whole screen.
3. Allow screen capture. If the browser does not offer a screen or window to share, check its site permissions and reload the page. On macOS, check System Settings › Privacy & Security › Screen & System Audio Recording, or Screen Recording on some versions, and allow your browser if it appears there.
4. Allow microphone access if narration is missing. In the browser's site controls beside the address bar, allow microphone access and reload the page. On Windows 11, check Settings › Privacy & security › Microphone. On macOS, check System Settings › Privacy & Security › Microphone and allow your browser.
5. Reduce other work while recording. Close demanding tabs and applications, then repeat the interaction. Heavy browser activity can make an animation or recording appear less smooth, especially on an older or busy computer.
6. Try another capture area if the page is black. Some protected video or graphics content may not appear in a tab recording. Try capturing the browser window or screen instead. If the content is protected, the browser may still block capture.

Make the recording easier to follow

Plan the interaction before you press record. Decide which button or menu to use, where to pause, and what result viewers should notice. Move the pointer deliberately, and avoid clicking several controls in quick succession. If the page has a long animation, let it finish once before repeating it.

For a very short interaction, make a test recording and watch it at normal speed. Check that the cursor is visible, the page stays readable, and the animation has enough time to play. If you need a closer view, zoom the page before recording, but keep the important controls and result on screen.

The recording is made in your browser and stays on your device. Review it before sharing, especially if you captured the full screen or browser window.