Animated page scroll

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

Open your site and go to the "Settings".

Go to the " Global <body> HTML code:" field In the "General" section:

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>

Save the changes

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

Updated on: 19/04/2025

Was this article helpful?

Thank you!