Smooth testimonial fade out

PRO

Turn any Elementor carousel into a smooth, auto-scrolling marquee with fading edges. Testimonials, logos, or feature cards scroll continuously with no user interaction needed – a neat way to keep your social proof section feeling alive and polished.

Copy

Unlock with Pro

Released

3 weeks ago

Category

Custom code

CSS

Built with

Need help?

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/* =========================
   Element UI Carousel Fade
   
   HOW TO USE:
   1. Add class "eui-fade-carousel" to the container wrapping your carousel
   2. Change --fade-bg to match your section background colour
   3. Update the rgba values below to match
   
   SPEED: Edit the SPEED value in the JS — lower = faster, higher = slower
========================= */

.eui-fade-carousel {
    position: relative;
    overflow: hidden;
    --fade-bg: #111111;
    --fade-width: 320px;
}

.eui-fade-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(
        to right,
        var(--fade-bg) 0%,
        rgba(17, 17, 17, 0) var(--fade-width),
        rgba(17, 17, 17, 0) calc(100% - var(--fade-width)),
        var(--fade-bg) 100%
    );
}

/* Tablet */
@media (max-width: 1024px) {
    .eui-fade-carousel {
        --fade-width: 160px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .eui-fade-carousel {
        --fade-width: 90px;
    }
}

Custom Javascript

JavaScript is loaded via a HTML widget. Don’t remove it – it powers the animation.

<script>
(function () {
  // EDIT: lower = faster, higher = slower
  const SPEED = 12000; // try 9000 (faster) or 16000 (slower)

  function setupMarquee(swiperRoot) {
    const swiper = swiperRoot && swiperRoot.swiper;
    if (!swiper) return;

    // Force marquee-style autoplay
    swiper.params.loop = true;

    swiper.params.autoplay = swiper.params.autoplay || {};
    swiper.params.autoplay.delay = 0;
    swiper.params.autoplay.disableOnInteraction = false;
    swiper.params.autoplay.pauseOnMouseEnter = false;

    swiper.params.speed = SPEED;

    // Linear easing on the wrapper
    if (swiper.wrapperEl) {
      swiper.wrapperEl.style.transitionTimingFunction = "linear";
    }

    // Restart autoplay cleanly
    if (swiper.autoplay && swiper.autoplay.stop) swiper.autoplay.stop();
    if (swiper.autoplay && swiper.autoplay.start) swiper.autoplay.start();

    swiper.update();
  }

  function init() {
    // Target only swipers inside your fade wrapper
    document
      .querySelectorAll(".eui-fade-carousel .swiper, .eui-fade-carousel .swiper-container")
      .forEach(setupMarquee);
  }

  // Elementor can render late, so run a few times
  window.addEventListener("load", init);
  setTimeout(init, 600);
  setTimeout(init, 1600);
})();
</script>