Animated Movie Schedule Blocks

This is an Animated Movie Schedule Block component. It structures chronological event data (like cinema showtimes) into a visual grid. Its function is to condense information using a pure CSS hover interaction, where an image poster slides away to reveal structured metadata (genre, time, title) through intersecting animated panels.

Specs

• Weight: ~3 KB (compiled). Zero external dependencies.
• Performance: Highly optimized. The animations rely entirely on CSS transition and transform properties (translateY, bottom, padding), ensuring smooth 60 FPS rendering without JavaScript layout thrashing.
• Theming / Customization: Driven by a robust SCSS configuration block. Variables control font size, grid gaps, columns, animation speed, and a mapped list of color themes ($blocks_themes).
• Responsiveness: Fluid grid based on percentage widths calculated dynamically in SCSS via the $blocks_grid-columns loop.

Anatomy

The component relies on absolute positioning within a hidden overflow container to orchestrate the sliding layers.

• HTML (The Skeleton): Written in Pug. Each .movie-block is an anchor tag (<a>) acting as the main wrapper. It contains distinct structural nodes: .genre (top label), .main-inform (initial overlay), .big-hours (background typography), .extra-inform (bottom revealing panel), and .cover (the image).
• CSS (The Skin): Compiled from SCSS. Extensive use of position: absolute on the child nodes. The layout uses classic floats (float: left) and a .clearfix hack rather than Flexbox or CSS Grid.
• JS (The Nervous System): Absent. The logic is strictly state-driven via the CSS :hover pseudo-class.

Logic

The core mechanism is “Multi-Layer Staggered Transitions”:

&:hover {
  .genre {
    top: 0;
    transition-delay: $blocks_animation-speed, ($blocks_animation-speed/0.85);
  }
  .main-inform {
    bottom: 100%;
  }
  .extra-inform {
    height: 4.625em;
    animation: border-bounce $blocks_animation-speed ease;
  }
}

Instead of moving a single container, the :hover state triggers simultaneous, independent movements across four different DOM nodes. The .main-inform panel slides completely out of the top bounds (bottom: 100%), the .genre panel slides down into view (top: 0), the background image moves slightly up (transform: translateY), and the .extra-inform panel expands upwards (height). By applying unique transition-delay and cubic-bezier timing functions to each element, the developer creates a complex, choreographed mechanical sequence using only declarative CSS.

Feel

Crisp, mechanical, and highly informative. The interaction feels like a physical shutter mechanism opening inside a camera. The bounce animation on the bottom border (border-bounce) adds a subtle tactile snap when the expansion finishes. It transforms a static poster into an interactive dashboard, providing immediate spatial feedback to the user’s cursor.