Recently worked on a project where the client ordered a landing page for their product. The Figma design looked great, but the client specifically emphasized the need for "living" animations on the page. "Make everything move! It should be dynamic and captivate visitors from the first seconds!" ✨

Initial Challenge 🤔

As a developer, I faced a task where good code alone wasn't enough — I needed creativity and a sense of balance. The client wanted a "wow effect," but I had to consider both technical limitations and usability.

In my opinion, today's web developers need not just coding skills, but also a good sense of design and aesthetics. We essentially become part-time art directors for our technical solutions, especially when it comes to animations and interactivity.

My Solution 💡

My first step was showing the client examples of different animation types from my personal reference collection (which I've gradually built from various projects). This helped us find common ground and agree on what "dynamic landing page" meant in our case.

For implementation, I used the AOS (Animate On Scroll) library, which makes it easy to add appearance animations when scrolling. I connected it via CDN:

href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<span class="na">src="https://unpkg.com/aos@2.3.1/dist/aos.js">

  AOS.init();

And then used attributes for different elements:

data-aos="fade-up" data-aos-duration="3000">

Custom CSS Animations ✨

While AOS handles basic effects well, for truly unique animations I created a collection of custom CSS solutions:

1. "Floating" Button Effect for CTA 👆 

@keyframes moveButton {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

.cta-button {
  animation: moveButton 2s infinite ease-in-out;
}

.cta-button:hover {
  animation-play-state: paused;
}

This animation adds subtle movement to the button, as if inviting you to click it. On hover, the movement stops, creating a pleasant interactive effect.

2. Pulsing Glow for Icons in Features Section 🌟 

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
  }
}

.feature-icon svg {
  animation: pulseGlow 3s infinite ease-in-out;
}

The icons slightly enlarge and begin to glow, drawing attention to the key benefits of the product.

3. Soft Image Pulsing in "How It Works" Section 📱 

@keyframes pulseImage {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(159, 123, 255, 0));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(159, 123, 255, 0.3));
  }
}

.how-column img {
  animation: pulseImage 4s infinite ease-in-out;
}

Images pulse very softly and get a slightly purple glow that matches the client's brand colors.

4. Connecting Lines Animation Between Blocks ↔️ 

@keyframes growLine {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 365px;
    opacity: 0.5;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

.how-connection-lines span {
  animation: growLine 4s infinite ease-in-out;
  animation-delay: calc(var(--line-index) * 1s);
}

Lines between "How It Works" blocks sequentially appear and disappear, creating a sense of process and movement between steps.

5. Flickering Effect for FAQ Elements ❓ 

@keyframes faqGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(159, 123, 255, 0);
    background: #161616;
  }
  50% {
    box-shadow: 0 0 12px rgba(159, 123, 255, 0.8);
    background: #1e1e1e;
  }
}

.accordion-item.active {
  animation: faqGlow 2s infinite ease-in-out;
}

Active FAQ elements get a subtle glow effect, demonstrating their active state.

6. "Living" Badge Effect for Section Labels 🏷️ 

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(58, 137, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(58, 137, 255, 0.9);
  }
}

.section-badge {
  animation: pulse-glow 3s infinite ease-in-out;
}

Badges with section names get a pulsing blue glow, creating emphasis on the page structure.

Combining AOS and Custom Animations 🔄

To achieve maximum effect, I often combined AOS for the initial appearance of elements and custom animations for subsequent behavior:

class="feature-icon" data-aos="zoom-in" data-aos-duration="800">
   class="icon" ... >
.feature-icon svg {
  animation: pulseGlow 3s infinite ease-in-out;
  animation-play-state: paused;
}

.feature-icon.aos-animate svg {
  animation-play-state: running;
}

This way, the icon first appears with a zoom-in effect, and then starts pulsing.

Result 🎉

The landing page turned out lively but not excessive. The hero section received the most animations, and then they gradually became more restrained, keeping the user's attention on the content. The client was satisfied with the balance between dynamics and functionality.

This work confirmed again how important it is for a developer to have not only technical skills but also a sense of aesthetics and a collection of ready-made examples to show clients.

What about you? 💬

What animation libraries do you use? GSAP, Anime.js, Lottie, or something else? Do you keep examples of successful implementations to show clients later? Perhaps you have your own life hacks for finding balance between a client's creative desires and technical limitations? Share in the comments! 👇