Smooth Flexbox Animation During Scrolling: FLIP Technique

Learn how to create smooth animations for changing flexbox element order during scrolling using the FLIP technique. Overcome CSS order property limitations with JavaScript.

1 answer• 1 view

12/26/2025, 11:40 AM

How can I create smooth animations for changing flexbox element order during scrolling? I have 4 blocks in a fixed container at the top of my page. When users scroll down, I want the blocks to transition smoothly from their initial positions to new positions. Specifically, I need the green block to disappear and the purple block to take its place. Using the CSS ‘order’ property causes abrupt transitions, and placing the green and purple blocks in the same container requires positioning the blue blocks with ‘position: absolute’, which I’d like to avoid. What’s the best approach to achieve smooth flexbox reordering animations during scroll events?

Creating smooth animations for changing flexbox element order during scrolling requires specialized techniques since standard CSS transitions don’t work with the order property or flex alignment keywords. The most effective solution is implementing the FLIP (First-Last-Invert-Play) technique, which captures element positions before and after layout changes and animates the transitions using CSS transforms for smooth, GPU-accelerated motion.

Understanding the Flexbox Animation Challenge
The FLIP Technique Explained
Implementing Smooth Flexbox Reordering
Scroll-Triggered Animation Implementation
Alternative Solutions and Their Limitations
Performance Optimization Tips
Complete Code Example

Understanding the Flexbox Animation Challenge

When working with flexbox layouts, developers often encounter the challenge of creating smooth animations when changing element order during scrolling. The issue stems from how browsers handle layout changes. Flexbox can smoothly animate numeric properties (like width from 100px to 200px), but keyword values such as flex-start to flex-end or changes to the order property are not interpolated by the browser.

This means that when you use JavaScript to change the order property of flex items during a scroll event, the transition happens instantly rather than smoothly. For your specific use case where you want blocks to transition smoothly during scrolling, this abrupt change creates a poor user experience.

The fundamental limitation is that browsers don’t automatically interpolate between discrete layout changes like order property modifications. Instead, they immediately recalculate the layout, resulting in jarring visual transitions.

The FLIP Technique Explained

The FLIP technique (First-Last-Invert-Play) is a powerful JavaScript-based approach for animating layout changes smoothly. Developed by Google, it works by capturing the initial and final states of elements and creating a performant animation between them.

The process involves four key steps:

First: Capture the current position and size of all elements before the layout change
Last: Change the layout and capture the new position and size of the elements
Invert: Calculate the difference between the old and new positions and temporarily move elements back to their original positions
Play: Animate elements from their original positions to their new positions using transforms

This technique leverages CSS transforms for the animation, which are GPU-accelerated and can achieve 60fps performance even with complex layout changes. The key insight is that while browsers can’t animate layout properties directly, they can animate transforms very efficiently.

By implementing FLIP, you can create smooth transitions between flexbox element order changes during scrolling without relying on CSS transitions that don’t work with the order property.

Implementing Smooth Flexbox Reordering

To implement smooth flexbox reordering using the FLIP technique, you’ll need to follow these steps:

Step 1: Capture Initial Element Positions

Before making any layout changes, capture the current positions of all flex items:

javascript

function getInitialPositions() {
  const items = document.querySelectorAll('.flex-item');
  return Array.from(items).map(item => ({
    element: item,
    x: item.offsetLeft,
    y: item.offsetTop,
    width: item.offsetWidth,
    height: item.offsetHeight
  }));
}

Step 2: Perform the Layout Change

Next, modify the flexbox order or other properties to achieve your desired layout:

javascript

function changeLayout() {
  const items = document.querySelectorAll('.flex-item');
  // Change order as needed
  items[0].style.order = 2; // Green block
  items[1].style.order = 0; // Purple block
  items[2].style.order = 1; // Blue block 1
  items[3].style.order = 3; // Blue block 2
}

Step 3: Calculate Inverted Positions

Calculate the inverted positions that will move elements back to their original locations:

javascript

function calculateInvertedPositions(initialPositions) {
  const items = document.querySelectorAll('.flex-item');
  const newPositions = Array.from(items).map(item => ({
    element: item,
    x: item.offsetLeft,
    y: item.offsetTop,
    width: item.offsetWidth,
    height: item.offsetHeight
  }));

  return initialPositions.map((oldPos, index) => ({
    element: oldPos.element,
    invertX: oldPos.x - newPositions[index].x,
    invertY: oldPos.y - newPositions[index].y,
    invertScaleX: oldPos.width / newPositions[index].width,
    invertScaleY: oldPos.height / newPositions[index].height
  }));
}

Step 4: Animate with Transforms

Finally, animate the elements from their inverted positions to their new positions:

javascript

function playAnimation(invertedPositions) {
  invertedPositions.forEach(({element, invertX, invertY, invertScaleX, invertScaleY}) => {
    // Apply inverted transform
    element.style.transform = `translate(${invertX}px, ${invertY}px) scale(${invertScaleX}, ${invertScaleY})`;
    element.style.transition = 'transform 0.5s ease-out';
    
    // Force a reflow to ensure the transform is applied
    void element.offsetWidth;
    
    // Remove the inverted transform to trigger the animation
    element.style.transform = '';
  });
}

Step 5: Complete Integration

Combine all steps into a function that handles the entire animation process:

javascript

function animateFlexboxReorder() {
  // Step 1: Capture initial positions
  const initialPositions = getInitialPositions();
  
  // Step 2: Change the layout
  changeLayout();
  
  // Step 3: Calculate inverted positions
  const invertedPositions = calculateInvertedPositions(initialPositions);
  
  // Step 4: Play the animation
  playAnimation(invertedPositions);
}

Scroll-Triggered Animation Implementation

To trigger this animation during scrolling, you’ll need to integrate it with a scroll event handler. For your use case with a fixed container at the top of the page, you can detect when the user has scrolled a certain distance and then initiate the animation.

Basic Scroll Detection

javascript

function handleScroll() {
  const scrollThreshold = 200; // Adjust based on your design
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  if (currentScroll >= scrollThreshold && !animationPlayed) {
    animateFlexboxReorder();
    animationPlayed = true;
  } else if (currentScroll < scrollThreshold && animationPlayed) {
    // Optional: reverse animation when scrolling back up
    reverseAnimation();
    animationPlayed = false;
  }
}

// Add event listener
window.addEventListener('scroll', handleScroll, { passive: true });

Optimized Scroll Performance

For better performance, especially with complex animations, consider adding debounce or throttle functionality:

javascript

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// Use with scroll handler
const optimizedScrollHandler = debounce(handleScroll, 100);
window.addEventListener('scroll', optimizedScrollHandler, { passive: true });

Intersection Observer Alternative

For more modern and efficient scroll detection, consider using the Intersection Observer API:

javascript

const observerOptions = {
  root: null, // relative to viewport
  rootMargin: '0px',
  threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !animationPlayed) {
      animateFlexboxReorder();
      animationPlayed = true;
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

// Observe the element that should trigger the animation
const triggerElement = document.querySelector('.scroll-trigger');
observer.observe(triggerElement);

Alternative Solutions and Their Limitations

While the FLIP technique is the recommended approach for smooth flexbox reordering, it’s worth understanding alternative solutions and their limitations:

CSS Transitions with Flex Properties

Some developers attempt to animate flex properties directly:

css

.flex-container {
  display: flex;
  transition: flex-direction 0.5s ease;
}

However, this approach fails because transitions on flexbox properties like flex-direction, order, or alignment keywords (justify-content, align-items) are not supported. The browser simply snaps to the new value without interpolation.

Absolute Positioning Workaround

As mentioned in your question, one alternative is to use absolute positioning:

css

.flex-container {
  position: relative;
}

.flex-item {
  position: absolute;
  transition: all 0.5s ease;
}

While this approach allows for smooth animations, it comes with several drawbacks:

It breaks the natural flexbox flow
Requires manual positioning calculations
Makes responsive design more complex
Doesn’t work well with flexbox features like wrapping or alignment

JavaScript Animation Libraries

You might consider using animation libraries like GSAP or Framer Motion:

javascript

// Using GSAP
gsap.to(".flex-item", {
  x: 100,
  duration: 1,
  ease: "power2.inOut"
});

While these libraries provide powerful animation capabilities, they add complexity and dependencies to your project. For simple flexbox reordering animations, the FLIP technique implemented with vanilla JavaScript is often sufficient.

Performance Optimization Tips

When implementing smooth flexbox reordering animations, performance is crucial. Here are several optimization techniques to ensure your animations run smoothly:

Use Hardware Acceleration

Ensure your animations leverage hardware acceleration by using transforms and opacity:

css

.flex-item {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

These properties hint to the browser that these elements will be animated, allowing the browser to optimize rendering.

Limit Animation Scope

Animate only what’s necessary. For flexbox reordering, focus on positioning elements rather than animating all properties:

javascript

// Only animate transforms, not all styles
element.style.transform = `translate(${x}px, ${y}px)`;

Reduce Layout Thrashing

Minimize browser recalculations by batching DOM operations:

javascript

// Use document fragments or batch style changes
function batchUpdateElements(updates) {
  requestAnimationFrame(() => {
    updates.forEach(update => {
      update.element.style.transform = update.transform;
    });
  });
}

Use requestAnimationFrame

Synchronize animations with the browser’s repaint cycle:

javascript

function animate() {
  requestAnimationFrame(() => {
    // Animation logic here
  });
}

Complete Code Example

Here’s a complete implementation of smooth flexbox reordering during scrolling:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smooth Flexbox Reordering</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      height: 200vh; /* For scrolling demonstration */
      padding-top: 100px;
    }
    
    .flex-container {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      width: 80%;
      max-width: 800px;
      height: 300px;
      background-color: #f0f0f0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .flex-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      color: white;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }
    
    .green {
      background-color: #4CAF50;
    }
    
    .purple {
      background-color: #9C27B0;
    }
    
    .blue {
      background-color: #2196F3;
    }
    
    .scroll-indicator {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="flex-container" id="flexContainer">
      <div class="flex-item green" data-order="0">Green</div>
      <div class="flex-item purple" data-order="1">Purple</div>
      <div class="flex-item blue" data-order="2">Blue 1</div>
      <div class="flex-item blue" data-order="3">Blue 2</div>
    </div>
    
    <div class="scroll-indicator">Scroll down to see animation</div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const flexContainer = document.getElementById('flexContainer');
      const flexItems = flexContainer.querySelectorAll('.flex-item');
      const scrollIndicator = document.querySelector('.scroll-indicator');
      let animationPlayed = false;
      
      // FLIP Implementation
      function getInitialPositions() {
        return Array.from(flexItems).map(item => ({
          element: item,
          x: item.offsetLeft,
          y: item.offsetTop,
          width: item.offsetWidth,
          height: item.offsetHeight
        }));
      }
      
      function changeLayout() {
        // Change order: Green disappears, Purple takes its place
        flexItems[0].style.order = 3; // Green (now last)
        flexItems[1].style.order = 0; // Purple (now first)
        flexItems[2].style.order = 1; // Blue 1
        flexItems[3].style.order = 2; // Blue 2
      }
      
      function calculateInvertedPositions(initialPositions) {
        const newPositions = Array.from(flexItems).map(item => ({
          element: item,
          x: item.offsetLeft,
          y: item.offsetTop,
          width: item.offsetWidth,
          height: item.offsetHeight
        }));
        
        return initialPositions.map((oldPos, index) => ({
          element: oldPos.element,
          invertX: oldPos.x - newPositions[index].x,
          invertY: oldPos.y - newPositions[index].y,
          invertScaleX: oldPos.width / newPositions[index].width,
          invertScaleY: oldPos.height / newPositions[index].height
        }));
      }
      
      function playAnimation(invertedPositions) {
        invertedPositions.forEach(({element, invertX, invertY, invertScaleX, invertScaleY}) => {
          // Apply inverted transform
          element.style.transform = `translate(${invertX}px, ${invertY}px) scale(${invertScaleX}, ${invertScaleY})`;
          
          // Force reflow
          void element.offsetWidth;
          
          // Remove transform to trigger animation
          element.style.transform = '';
        });
        
        // Hide scroll indicator
        scrollIndicator.style.display = 'none';
      }
      
      function animateFlexboxReorder() {
        const initialPositions = getInitialPositions();
        changeLayout();
        const invertedPositions = calculateInvertedPositions(initialPositions);
        playAnimation(invertedPositions);
        animationPlayed = true;
      }
      
      // Scroll handling with debounce
      function handleScroll() {
        const scrollThreshold = 300;
        const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
        
        if (currentScroll >= scrollThreshold && !animationPlayed) {
          animateFlexboxReorder();
        }
      }
      
      // Debounce function
      function debounce(func, wait) {
        let timeout;
        return function() {
          const context = this;
          const args = arguments;
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            func.apply(context, args);
          }, wait);
        };
      }
      
      const optimizedScrollHandler = debounce(handleScroll, 100);
      window.addEventListener('scroll', optimizedScrollHandler, { passive: true });
    });
  </script>
</body>
</html>

This complete example demonstrates:

A fixed flex container with four colored blocks
Smooth reordering animation triggered by scrolling
Implementation of the FLIP technique for smooth transitions
Performance optimizations like debouncing and hardware acceleration
Clean separation of concerns with organized JavaScript functions

The animation will trigger when the user scrolls down 300px, causing the green block to move to the end and the purple block to take its place at the beginning, all while maintaining smooth transitions that feel natural to the user.

Sources

Conclusion

Creating smooth animations for changing flexbox element order during scrolling is achievable with the right approach. The FLIP (First-Last-Invert-Play) technique provides the most effective solution by leveraging JavaScript to capture element positions before and after layout changes, then animating transitions using CSS transforms. This method overcomes the limitations of CSS transitions on flexbox properties like order and alignment keywords.

By implementing the FLIP technique, you can achieve 60fps GPU-accelerated animations that provide a smooth, professional user experience. The key steps involve capturing initial positions, modifying the layout, calculating inverted positions, and then animating elements back to their new locations using transforms.

For your specific use case with a fixed container containing four blocks, this approach will allow the green block to smoothly transition out of view while the purple block takes its place, all while maintaining the natural flow of the blue blocks without requiring absolute positioning. The result is a polished, performant animation that enhances the user experience rather than disrupting it.

Authors

NeuroAnswers

Author

Verified by moderation

NeuroAnswers

Moderation

Smooth Flexbox Animation During Scrolling: FLIP Technique

Contents

Understanding the Flexbox Animation Challenge

The FLIP Technique Explained

Implementing Smooth Flexbox Reordering

Step 1: Capture Initial Element Positions

Step 2: Perform the Layout Change

Step 3: Calculate Inverted Positions

Step 4: Animate with Transforms

Step 5: Complete Integration

Scroll-Triggered Animation Implementation

Basic Scroll Detection

Optimized Scroll Performance

Intersection Observer Alternative

Alternative Solutions and Their Limitations

CSS Transitions with Flex Properties

Absolute Positioning Workaround

JavaScript Animation Libraries

Performance Optimization Tips

Use Hardware Acceleration

Limit Animation Scope

Reduce Layout Thrashing

Use requestAnimationFrame

Complete Code Example

Sources

Conclusion