project-asymmetric-gallery

Summary

Asymmetric two-column portfolio gallery: six tiles split across left/right columns with offset margins (tp-project-mr, tp-project-ml, text-end) and varied heights (height-1 to height-6). Each tile has a data-speed parallax and a magnetic "View Demo" cursor on hover.

HTML structure (minimal)

<div class="tp-project-area fix">
  <div class="tp-project-gallery-wrapper">
    <div class="container container-1630">
      <div class="tp-project-gallery-top pb-50">
        <div class="row">
          <div class="col-xl-6 col-md-6">
            <div class="tp-project-left-wrap">
              <div class="tp-project-item tp-project-mr mb-200">
                <div class="tp-project-img height-1 fix not-hide-cursor" data-cursor="View<br>Demo">
                  <a class="cursor-hide" href="/portfolio-details-3">
                    <img data-speed=".8" src="/project-1-1.jpg" alt="">
                  </a>
                </div>
              </div>
              <!-- 2 more items -->
            </div>
          </div>
          <div class="col-xl-6 col-md-6">
            <div class="tp-project-right-wrap">
              <!-- 3 more items, the last followed by a 'View all projects' button -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-project-item { position: relative; }
.tp-project-mr { margin-right: 80px; }
.tp-project-ml { margin-left: 80px; }
.tp-project-img.height-1 { height: 540px; }
.tp-project-img.height-2 { height: 700px; }
.tp-project-img.height-3 { height: 460px; }
.tp-project-img.height-4 { height: 620px; }
.tp-project-img.height-5 { height: 540px; }
.tp-project-img.height-6 { height: 700px; }
.tp-project-img img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.cursor-hide { cursor: none; }

Animation logic

// ScrollSmoother reads data-speed attributes and translates each <img>
// at a different rate as the user scrolls — produces a tile-by-tile parallax
// without per-element ScrollTrigger setup.
// data-cursor="View<br>Demo" is consumed by tp-cursor.js, which swells the
// follower ball, hides the native pointer (.cursor-hide) and renders the label.

Notable details

• Six different height-N classes paired with mr/ml modifiers create the asymmetric "magazine spread" feel without absolute positioning.
• Per-image data-speed lets each tile parallax at a different rate while the columns scroll naturally.
• not-hide-cursor + cursor-hide toggle the magic cursor's "hover state" purely via class names.

Use when

• Portfolio grids where you want each project to feel like its own crop, not a uniform card grid.
• When you already have ScrollSmoother enabled and want to use its data-speed parallax instead of writing per-tile triggers.

Caveats

• Requires GSAP ScrollSmoother (Club GreenSock paid plugin).
• Tile heights are fixed pixel values — design has to commit to image aspect ratios.