Skip to Content
DocsDeveloper GuideAnimations

Animations

WebF supports standard CSS Transitions and CSS Animations, which are highly performant as they can be run off the main JavaScript thread.

Because this core technology is supported, the recommended best practice for creating animations in WebF is to leverage a utility-class framework like Tailwind CSS. This approach allows you to define your animations and transitions declaratively.

The workflow consists of two parts:

  1. Applying utility classes to define the initial state, final state, and the transition/animation properties of an element.
  2. Using JavaScript to toggle a class that triggers the transition between states, usually in response to a user interaction or state change.

Example: Interactive Scale Animation with React and Tailwind CSS

This example demonstrates a high-performance scale animation using CSS transforms. This type of animation is ideal for interactive elements like cards or buttons.

import React, { useState } from 'react';
 
function ScaleAnimationExample() {
  const [isScaled, setIsScaled] = useState(false);
 
  return (
    <div className="p-6 flex flex-col items-center gap-6">
      <div
        className={[
          'w-24 h-24 rounded-lg text-white font-semibold flex items-center justify-center shadow-lg',
          'bg-gradient-to-br from-indigo-500 to-purple-600',
          // The transition utility enables smooth animation for transform changes
          'transition-transform duration-300 ease-out',
          // Toggle between scale classes based on state
          isScaled ? 'scale-110' : 'scale-90',
        ].join(' ')}
      >
        Scale
      </div>
 
      <button
        className="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium"
        onClick={() => setIsScaled(!isScaled)}
      >
        {isScaled ? 'Scale Down' : 'Scale Up'}
      </button>
    </div>
  );
}

In this example, changing the isScaled state simply toggles the scale-110 and scale-90 classes. WebF’s rendering engine handles the interpolation smoothly on the compositor thread, ensuring a jank-free experience.

Fade Animations

function FadeExample() {
  const [isVisible, setIsVisible] = useState(true);
 
  return (
    <div>
      <div
        className={`
          transition-opacity duration-500
          ${isVisible ? 'opacity-100' : 'opacity-0'}
        `}
      >
        Fade me in and out
      </div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
    </div>
  );
}

Slide Animations

function SlideExample() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div className="relative overflow-hidden">
      <div
        className={`
          transform transition-transform duration-300
          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
        `}
      >
        <div className="w-64 h-screen bg-gray-800 p-4">
          Sidebar content
        </div>
      </div>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Sidebar
      </button>
    </div>
  );
}

Using CSS Keyframe Animations

For more complex animations, you can use CSS keyframes:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
 
.bounce-animation {
  animation: bounce 1s infinite;
}
function BounceExample() {
  return (
    <div className="bounce-animation">
      Bouncing element
    </div>
  );
}

Performance Tips for Animations

1. Use Transform and Opacity

These properties are GPU-accelerated and perform best.

/* ✅ Good - GPU accelerated */
.animated {
  transform: translateX(100px);
  opacity: 0.5;
}
 
/* ❌ Avoid - triggers layout */
.animated {
  left: 100px;
  width: 200px;
}

2. Keep Animations Short

Aim for animations between 200-500ms for most UI interactions.

3. Use Native Widgets for Complex Animations

For very complex or performance-critical animations, consider using Flutter widgets instead.

Next Steps

  • Learn about Canvas for pixel-based graphics
  • Learn about SVG for scalable vector graphics
  • Explore Performance optimization techniques
  • Check out Hybrid UI for Flutter widget animations
CI/CDCanvas