> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Animated page scroll

To add a page scroll animation, follow these simple steps:

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/powertoysptdna1nd19_18k6h3.gif =1000x1000)





1. Open your site and go to the "**Settings**".

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_12ab77n.png =1000x1000)

2. Go to the " **Global <body> HTML code:**" field In the "**General**" section:
![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_1ad9w48.png =600x600)

3. Copy the following code and paste it into the "**Global <body> HTML code:**" field:

```
<style>
   .page-component__wrapper {
      opacity: 0;
      transform: perspective(1000px) translateX(0px) translateY(30px) scale(1) rotate(0deg) rotateX(10deg) rotateY(0deg) translateZ(0px);
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
   }

   .page-component__wrapper.visible {
      opacity: 1;
      transform: perspective(1000px) translateX(0px) translateY(0px) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
   }

   body {
      overflow-x: hidden;
   }  

</style>

<script>
   const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
         console.log('entry.target:', entry.target);
         if (entry.isIntersecting) {
            console.log('Element is visible');
            entry.target.classList.add('visible');
         } else {
            console.log('Element is hidden');
            entry.target.classList.remove('visible');
         }
      });
   });

   const blocks = document.querySelectorAll('.page-component__wrapper');
   blocks.forEach(block => observer.observe(block));

</script>
```

4. Save the changes
 ![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/image_1n48b9o.png =500x500)

5. Finally! Preview the animation Since the animation is only visible in live mode, publish or refresh the site and open it in a browser.
