process-icon-row

Summary

A centered work-process band that lists four numbered steps (Project Processing, High Quality Products, Huge Choice Products, Quality Finished). Each step is an icon-circle with a subtle animated border, a title, and a two-line description. A greyscale "PROCESS" watermark sits behind the row as a fade-in element.

HTML structure (minimal)

<section class="process-section pt-130 fade-wrapper">
  <div class="bg-shape"><img src="assets/img/shapes/process-shape.png" alt="shape"></div>
  <div class="container">
    <div class="section-heading text-center">
      <h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">Work Process</h4>
      <h2 class="section-title overflow-hidden" data-text-animation data-split="word" data-duration="1">
        Follow 4 Easy Work Steps
      </h2>
    </div>
    <div class="row gy-lg-0 gy-5">
      <div class="col-lg-3 col-md-6">
        <div class="process-item fade-top">
          <div class="process-icon">
            <div class="icon-border"></div>
            <img class="dark-img" src="assets/img/icon/process-1.png" alt="icon">
            <img class="light-img" src="assets/img/icon/process-1-light.png" alt="icon">
          </div>
          <div class="process-content">
            <h3 class="title">Project Processing</h3>
            <p>Cursus euismod dictumst a non dis nisi sociosqu mauris.</p>
          </div>
        </div>
      </div>
      <!-- 3 more items -->
    </div>
  </div>
  <div class="process-text wow fade-in-bottom">
    <img class="dark-img" src="assets/img/images/process-img.png" alt="process">
  </div>
</section>

Key SCSS tokens

.process-item {
  text-align: center;
  .process-icon {
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--rr-color-bg-1); position: relative; margin: 0 auto 30px;
    display: flex; align-items: center; justify-content: center;
    .icon-border {
      position: absolute; inset: -8px; border-radius: 50%;
      border: 1px dashed var(--rr-color-border-1);
      animation: spin 12s linear infinite;
    }
  }
  .process-content .title {
    color: var(--rr-color-common-white); font-size: 24px; font-weight: 700; margin-bottom: 12px;
  }
}
@keyframes spin { to { transform: rotate(360deg); } }

Animation logic

// Each .fade-wrapper iterates its .fade-top children and fades them up with a 0.10s
// per-index delay, tied to a ScrollTrigger.
$(".fade-wrapper").each(function () {
  var section = $(this);
  section.find(".fade-top").each(function (index, element) {
    var delay = index * 0.10;
    gsap.set(element, { opacity: 0, y: 100 });
    ScrollTrigger.create({
      trigger: element, start: "top 100%", end: "bottom 20%", scrub: 0.5,
      onEnter: function () {
        gsap.to(element, { opacity: 1, y: 0, duration: 1, delay });
      }, once: true,
    });
  });
});

// Section heading runs SplitType + ScrollTrigger from data-text-animation attrs.

Notable details

• Each .process-icon carries a separate .icon-border ring with a slowly spinning dashed outline — the icon stays static, the border rotates, giving the impression of a "thinking" indicator.
• Both light and dark icon variants ship as paired <img class="dark-img"> + <img class="light-img">; CSS in _light-mode.scss shows/hides the right one based on [data-theme].
• The "PROCESS" watermark image is positioned in absolute layout below the grid via .process-text, doubling as a section divider.

Use when

• Process / how-it-works sections for service businesses that want more energy than a static numbered list.
• When you need a fade-up + dashed-spinner combo to feel "active" without committing to a Lottie animation.

Caveats

• The dashed-border keyframe runs continuously and can be a CPU drag on long pages with many of these icons; consider prefers-reduced-motion.
• The .fade-top ScrollTrigger uses once: true, so re-entering the element from the top after a refresh won't re-trigger the animation — fine for marketing pages but not for SPA-style routes.