Scroll Scene #4

Component Structure

• COPY WRAPPER (div): Acts as a container for the entire Scroll Scene #4, ensuring all elements are grouped together for cohesive behavior.

• SC4 COMPONENT (section): The main viewport of Scroll Scene #4, styled with .sc4__component, sets the foundational layout and visual area for the interactive experience.

• SC4 IMAGE (image): A visually striking background image, applied with .sc4__image, fills the viewport and sets the thematic backdrop of the scene.

• SC4 GRID (block): This grid, defined by .sc4__grid, organizes the column elements in a structured manner over the background image, facilitating the animated interaction.

• SC4 GRID COLs (divs): Individual columns within the grid, identified by .sc4__grid-col, act as masks for the background image, enabling the animation effects as users scroll.

Animation Structure

SC4 - Scroll: This Bricksforge timeline is designed to animate the .sc4__grid-col elements in two groups, with differing animations to create a captivating visual effect as the page scrolls.

• Column Animation 1: Targets the second, third, and sixth columns for a bottom-to-top reveal effect, gradually hiding these columns as the user scrolls down.

• Column Animation 2: Focuses on the first, fourth, fifth, and seventh columns, employing a top-to-bottom masking animation, progressively revealing these columns on scroll.