Font Zoom Animation Squarespace

How to Create Font Zoom Animation in Squarespace - Complete Plugin

1. How it Works

Watch our detailed video guide to learn how to integrate custom animations into your Squarespace site. We’ll walk you through each step to ensure a smooth implementation.

2. Add this code to Code Block (HTML)

<center><h2 class="scroll-effect">YOUR HEADING TEXT</h2></center>

3. Add this code to CSS

/// Initial Style for the Heading ///
h2.scroll-effect {
  position: relative;
  font-size: 2em;
}

4. Add this code to Website Tools - Code Injection - Paste code in Header


      ///WWW.SQUARESPELL.COM///
<script>
document.addEventListener('scroll', function() {
  const scrollPosition = window.scrollY;
  const heading = document.querySelector('h2.scroll-effect');
  if (heading) {
    // Increase font size based on scroll position
    let newSize = 2 + scrollPosition / 200; // Adjust the divisor to control the rate of size increase
    heading.style.fontSize = newSize + 'em';
    // Move heading from bottom to top based on scroll position
    let newPosition = scrollPosition / 5; // Adjust the divisor to control the rate of movement
    heading.style.transform = 'translateY(-' + newPosition + 'px)';
  }
});
</script>

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!