How Animations Are Captured in Sitepager

Sitepager captures your website by rendering it in a browser, scrolling through the entire page to load all content, and then scrolling back to the top to take a full-page screenshot. This ensures that all visible elements and animations are accurately captured at the time of the screenshot.

Animations are captured based on their visible state at the moment Sitepager scrolls back to the top and takes the screenshot. If elements are hidden (e.g., opacity: 0, visibility: hidden, or display: none) at that moment, they will not appear in the screenshot, regardless of whether they were visible earlier during the scroll process.

Understanding how animations are configured—whether they loop, have start or end states, or depend on user interactions—is key to ensuring they appear correctly in your visual tests.

Configuring Animations for Sitepager

1. Scroll-Based Animations

These animations are triggered when the user scrolls through the page, causing elements to appear, fade, slide, or transform into view.

Examples:

• Fade-In on Scroll:
  A testimonial block transitions from opacity: 0 to opacity: 100% as it enters the viewport.

• Slide-In on Scroll:
  A call-to-action button moves from off-screen to its final position as the user scrolls.

• Scroll Out of View:
  A header logo or navigation bar fades out (opacity: 0) or slides away as the user scrolls past the hero section to maintain a minimalist design.

How Sitepager Captures Them:

• Captures the final visible state (opacity: 100%, visibility: visible) of elements at the time of the screenshot.

• Elements that become hidden (opacity: 0, visibility: hidden) after scrolling out of view will not appear.

Best Practices:

1. Define Visible Final States:
   Ensure elements are fully visible (opacity: 100%, visibility: visible) at the end of their animation to ensure they are included in the screenshot.

2. Avoid Invisible Final States:
   If elements fade out or become hidden as their final state, they won’t appear in the screenshot.

2. Hover and Click-Based Animations

These animations depend on user interactions, such as hovering over a navigation menu or clicking a button to reveal more content.

Examples:

• Dropdown Menu on Hover:
  A navigation bar reveals a submenu when hovered over.

• Popup or Modal on Click:
  A "Sign Up" form or subscription modal appears when the user clicks a button.

How Sitepager Captures Them:

• Simulates hover and click actions when configured with selectors. You can configure your checks to simulate the hover and click actions using hover or click selectors.

• Captures the interaction state of elements, such as a dropdown menu remaining open or a modal becoming visible.

Best Practices:

1. Persistent Effects:
   Configure modals, dropdowns, or other interactive elements to remain visible after being triggered.

2. Use Sitepager’s Interaction Feature:
   Specify hover or click selectors in your Check configuration to ensure these interactions are captured.

For detailed steps, refer to our Hover and Click Interactions Documentation.

3. Opacity and Visibility-Based Animations

These animations adjust an element’s visibility using opacity, visibility, or display properties. They’re often used to highlight content or draw attention to specific areas of a page.

Examples:

• Fade-In on Page Load:
  A hero image or headline fades into view from opacity: 0 to opacity: 100% when the page loads.

• Timed Visibility of Promotional Content:
  A discount banner, such as 'Get 20% Off Today!', transitions from visibility: hidden to visibility: visible a few seconds after the page loads to catch the user’s attention.

How Sitepager Captures Them:

• Only elements that are visible (opacity: 100%, visibility: visible) at the time of the screenshot will appear.

• Elements styled with display: none will not be captured.

Best Practices:

1. Ensure Visibility at Capture Time:
   Define start and end states with opacity: 100% and visibility: visible for elements you want to capture.

2. Avoid display: none:
   Elements hidden using display: none are hidden from view and do not appear in the screenshot.

3. Test Timed Animations:
   If elements take time to transition into view, increase Sitepager’s Page Load Wait Time to allow animations to complete.

4. Step Animations

Step animations involve sequential changes to multiple elements, often triggered by scrolling. These animations create a dynamic "step-by-step" effect as users progress through a section.

Examples:

• Sequential Image Reveal:
  A product gallery reveals images one at a time as the user scrolls through a section.

• Section Highlighting:
  Content sections are highlighted one by one while the user scrolls.

How Sitepager Captures Them:

• Captures the final visible state of each animation step at the time of the screenshot.

• Animations that loop continuously or reset their state may not be fully captured.

Best Practices:

1. Ensure Visible States for Each Step:
   For each step, ensure a visible state at the end of the animation.

2. Adjust Continuous Loops:
   For animations that loop, make sure the state you want captured is visible when Sitepager scrolls back to the top for the final screenshot.

How to Preview What Sitepager Will Capture

If you're unsure how Sitepager will capture animations or other visual elements on your page, you can use Chrome's built-in tools to take a full-page screenshot. This offers a preview of how your website will appear in Sitepager’s screenshot, helping you identify missing animations or elements. Note that automated captures in Sitepager may differ slightly depending on your test configuration.

Steps to Capture a Full-Page Screenshot in Chrome:

1. Open Chrome Developer Tools:

   • Press Command + Option + I (on Mac) or Ctrl + Shift + I (on Windows).
     This opens Chrome's Developer Tools.

2. Open the Command Menu:

   • Press Command + Shift + P (on Mac) or Ctrl + Shift + P (on Windows).
     This opens a search bar within Developer Tools.

3. Search for the Screenshot Option:

   • Type "screenshot" into the search bar.

4. Capture the Screenshot:

   • Select "Capture full size screenshot" from the dropdown options.

   • Chrome will automatically save the full-page screenshot to your Downloads folder.

Why This Matters:
Chrome renders pages similarly to Sitepager. Taking a full-page screenshot in Chrome allows you to preview how animations and content will appear in Sitepager’s visual test results, helping you ensure that all elements are in the correct state.

Use this method to verify the visibility of animations, ensure elements are in their correct state, and make any necessary adjustments before running your Sitepager Check.

Key Takeaways

1. Final States Are Key:
   For animations to appear in Sitepager’s screenshots, they must be visible (opacity: 100%, visibility: visible) when the screenshot is taken. Elements removed from the DOM (display: none) will not be captured.

2. Simulate Interactions for Hover/Click Animations:
   Use Sitepager’s Hover and Click Selector feature to test dropdowns, modals, and other interactive elements. Refer to our Hover and Click Interactions Documentation for setup instructions.

3. Test with Chrome Screenshots:
   Preview your page using browser screenshots to understand what Sitepager will capture and make any necessary adjustments to configurations before running your Check.

4. Adjust Page Wait Time for Longer Animations:
   If animations take time to complete, increase Sitepager’s Page Wait Time to allow all elements to fully render before the screenshot is taken.

Maintaining Visual Consistency in Your Animations

Animations add depth and interactivity to websites, but they can complicate testing for visual consistency. By following this guide and ensuring animations have clear and visible states, you can simplify the process of capturing them accurately. Understanding how animations interact with Sitepager’s capture process helps you ensure your website remains visually consistent while delivering an engaging experience for users.