Component location
Files are located in src/components/layout/beforeafter.
Inside you’ll find the JS file, an HTML example, and an SCSS file for styling.
Basic markup
Add the wrapper data-anim-beforeafter, two layers (before and
after),
and a divider/handle element (arrow). The component will auto-initialize when it
detects the
required attributes.
<div data-anim-beforeafter class="before-after">
<div data-anim-beforeafter-before class="before-after__item">...</div>
<div data-anim-beforeafter-after class="before-after__item">...</div>
<div data-anim-beforeafter-arrow class="before-after__arrow"></div>
</div>Example with images
Place your images inside the corresponding blocks using <img>.
Then style the divider/handle element (data-anim-beforeafter-arrow) as you like.
<div data-anim-beforeafter class="before-after">
<div data-anim-beforeafter-before class="before-after__item">
<img src="@img/image-1.jpg" alt="Image">
</div>
<div data-anim-beforeafter-after class="before-after__item">
<img src="@img/image-2.jpg" alt="Image">
</div>
<div data-anim-beforeafter-arrow class="before-after__arrow"></div>
</div>.before-after with a fixed aspect ratio (or a set height),
make both items fill the wrapper, and then style .before-after__arrow as a visible
drag handle / divider line.
Download
Need fast image comparisons for portfolios, case studies, or redesign demos? Download the template and build a Before/After block in minutes.