UINEXA SNIPPET

Apple-Like Scroll Reveal

A smooth Elementor scroll reveal with fade, blur, scale and directional movement using reusable CSS classes and IntersectionObserver.

CSS HTML Intermediate FREE FEATURED

Snippet Details

Difficulty: Intermediate

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<section class="ux-reveal-demo">
  <span class="ux-reveal-demo__eyebrow ux-reveal ux-reveal--up">
    Smooth Motion
  </span>

  <h2 class="ux-reveal ux-reveal--up ux-reveal--delay-1">
    Build interfaces that feel alive.
  </h2>

  <p class="ux-reveal ux-reveal--up ux-reveal--delay-2">
    Reuse the reveal classes on Elementor headings, text widgets,
    images, buttons and containers.
  </p>

  <a
    class="ux-reveal-demo__button ux-reveal ux-reveal--scale ux-reveal--delay-3"
    href="#your-link"
  >
    Explore Effects
    <span aria-hidden="true">↗</span>
  </a>
</section>

/* =====================================================
   UINEXA – APPLE-LIKE SCROLL REVEAL
===================================================== */

.ux-reveal {
  --ux-reveal-x: 0px;
  --ux-reveal-y: 34px;
  --ux-reveal-scale: .96;
  --ux-reveal-delay: 0ms;

  opacity: 0;
  filter: blur(12px);
  transform:
    translate3d(
      var(--ux-reveal-x),
      var(--ux-reveal-y),
      0
    )
    scale(var(--ux-reveal-scale));
  transition:
    opacity 850ms cubic-bezier(.2, .8, .2, 1),
    filter 850ms cubic-bezier(.2, .8, .2, 1),
    transform 850ms cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--ux-reveal-delay);
  will-change: opacity, filter, transform;
}

.ux-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.ux-reveal--up {
  --ux-reveal-y: 42px;
}

.ux-reveal--down {
  --ux-reveal-y: -42px;
}

.ux-reveal--left {
  --ux-reveal-x: -48px;
  --ux-reveal-y: 0px;
}

.ux-reveal--right {
  --ux-reveal-x: 48px;
  --ux-reveal-y: 0px;
}

.ux-reveal--scale {
  --ux-reveal-y: 0px;
  --ux-reveal-scale: .88;
}

.ux-reveal--delay-1 {
  --ux-reveal-delay: 100ms;
}

.ux-reveal--delay-2 {
  --ux-reveal-delay: 200ms;
}

.ux-reveal--delay-3 {
  --ux-reveal-delay: 300ms;
}

.ux-reveal--delay-4 {
  --ux-reveal-delay: 400ms;
}


/* Demo styling */
.ux-reveal-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 820px;
  padding: clamp(42px, 8vw, 90px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 72% 12%,
      rgba(108, 99, 255, .2),
      transparent 34%
    ),
    #070B18;
  color: #FFFFFF;
}

.ux-reveal-demo__eyebrow {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #00D4FF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ux-reveal-demo h2 {
  max-width: 720px;
  margin: 25px 0 18px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.ux-reveal-demo p {
  max-width: 650px;
  margin: 0;
  color: #A7B0C3;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
}

.ux-reveal-demo__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 30px;
  padding: 16px 24px;
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      #6C63FF,
      #3B82F6,
      #00D4FF
    );
  color: #FFFFFF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(108, 99, 255, .25);
}

@media (prefers-reduced-motion: reduce) {
  .ux-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}


/* Elementor editor fallback */
.elementor-editor-active .ux-reveal {
  opacity: 1;
  filter: none;
  transform: none;
}

Installation

How to use this snippet

1. Add the class ux-reveal to any Elementor widget or container.

2. Add a direction class such as ux-reveal--up, ux-reveal--left, ux-reveal--right or ux-reveal--scale.

3. Add an optional delay class such as ux-reveal--delay-1 or ux-reveal--delay-2.

4. Paste the CSS code into Elementor Custom CSS or your website stylesheet.

5. Add the JavaScript through Elementor Custom Code and set the location to Body End.

6. Test the reveal animation on desktop and mobile.

Elementor Note

Elementor usage

Add the reveal classes under Advanced → CSS Classes. The CSS includes an Elementor editor fallback so the content remains visible while editing.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓