How do I add a text entrance animation in Squarespace?

Text Entrance Animation — Squarespace CSS

Entrance animations on headings create an engaging first impression. Use CSS keyframes with animation-delay to stagger elements — heading first, then subtext, then button.

Only animate above-the-fold content with entrance animations. Deeper content should use scroll-triggered animations instead so users aren't waiting for animations they can't see.

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* First section heading */
.page-section:first-child h1 {
  animation: slideUp 0.7s ease forwards;
}

/* Stagger the paragraph */
.page-section:first-child p {
  opacity: 0;
  animation: slideUp 0.7s ease forwards;
  animation-delay: 0.2s;
}

/* Stagger the button */
.page-section:first-child .sqs-block-button-element {
  opacity: 0;
  animation: slideUp 0.7s ease forwards;
  animation-delay: 0.4s;
}

Create entrance animations with our Animation GeneratorTry it free →