Animated page scroll

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

Go to Page Settings:
Open your site and go to Settings.

Go to the "General" section:
Find the page settings section called "General" .

Find the "Global <body> HTML code" field:
In the "General" section, find the field designed to insert the global HTML code for the <body>.

Paste the code into the field:
Copy the following code and paste it into the specified 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:
After pasting the code, make sure you save the changes in the page settings.

Finally! Preview the animation
Since the animation is only visible in live mode, publish or refresh the site and open it in a browser. Scroll the page to see how the elements animate as they appear on the screen.

Updated on: 05/09/2024

Was this article helpful?

Thank you!