Animating Responsively: Implementing Observer Patterns for UI Transitions

Improving UI Fluidity

Animations in my-portfolio often suffer from a 'one-and-done' problem: they trigger when a user scrolls into view, but stay active or visible even after the element is no longer relevant. To refine the user experience, I recently implemented a more reactive approach to how we handle reveal animations, ensuring they gracefully reset when an element exits the viewport.

The Observer Pattern in Action

Instead of relying on scroll event listeners—which can be performance-heavy—I leveraged the browser's native IntersectionObserver API. This allows the component to 'observe' its own position relative to the screen, treating the viewport as a sensor that triggers specific state changes.

Think of this like a motion-activated light switch in a hallway. You don't need to stand there checking the switch; the sensor handles the transition automatically whenever someone enters or leaves the space.

Implementation Concept

By encapsulating the observer logic within a reusable React hook, we can keep our presentation components clean. When the observer reports a status change, the component updates its internal state to toggle visibility CSS classes:

const useIntersectionObserver = (ref, options) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsVisible(entry.isIntersecting);
    }, options);

    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref, options]);

  return isVisible;
};

Refined User Experience

With this approach, when an element leaves the viewport, the isVisible state flips to false, allowing us to remove or reset the animation class. This keeps the document tidy and ensures that animations are ready to play again if the user scrolls back up.

Actionable Takeaway

Stop relying on expensive scroll-tracking libraries for simple reveal animations. Use IntersectionObserver to offload the heavy lifting to the browser. Next time you implement a scroll-triggered animation, build a small, reusable hook to manage the observer lifecycle—it will keep your components modular and your animations more predictable.

Generated with Gitvlg.com