Section 1 — Hero
Welcome to the Test Lab
A scrolling sandbox for TGM Animation Studio. Six sections, full-viewport each. Scroll down — there’s a lot of room to test entrance animations, parallax, scroll-triggered dividers, and scrub timelines.
Section 2 — About
Two columns, side by side.
This row uses a CSS grid for the two-column layout. Once you wire in a [tgms_animation] scene, you could drop it in the right column with a scroll_parallax=”yes” attribute and watch it shift as you scroll. The left column would stay anchored. Classic parallax depth effect.
Section 3 — Features
Three-column feature grid.
Scroll Section
Pin + scrub timeline. The container element you’ve already built.
Divider Sweep
Wiper animation with clip-path masking along the divider profile.
Parallax Layers
Multi-layer scenes with depth-based scroll offsets.
Section 4 — Divider Test Slot
Drop a [tgms_scroll_section] here.
This is the section to replace with a TGM scroll section wrapper once you’re ready to test the engine. Put a divider inside, set scroll_position_from / scroll_position_to, and watch the wiper sweep as you scroll.
[tgms_scroll_section scroll="yes" height="200vh" pin="yes"]...[/tgms_scroll_section]
Section 5 — Pull Quote
“Build slow, validate each step. Never deliver edited code without bumping the version.”
— TGM Standing Rules
Section 6 — Final CTA
End of scroll.
You made it through six full viewports. If your animation triggers fired correctly, the work is done. If they didn’t — back to the engine.