Dot Grow/Shrink con scroll

Cómo integrarlo en WordPress / Elementor

1. En el editor, añade un bloque HTML personalizado y pega este snippet completo.
2. Si prefieres separar, usa los bloques siguientes de HTML/CSS/JS en sus ubicaciones respectivas.
3. Publica o actualiza la entrada. La demo se renderiza in situ.

Notas de UX y rendimiento

• Pin del escenario y scrub para sensación física con el scroll.
• La animación solo usa transform: scale() (mejor para GPU).
• Respeta prefers-reduced-motion (sin animación para quien lo solicita).

HTML mínimo

<div class="stage">
  <div class="dot"></div>
</div>
<div class="panels"></div>

JS (GSAP + ScrollTrigger)

gsap.registerPlugin(ScrollTrigger);
const stage = document.getElementById('dot-stage');
const dot   = document.getElementById('dot');

const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.set(dot, {xPercent:-50, yPercent:-50});

  gsap.timeline({
    scrollTrigger:{
      trigger: stage,
      start: "top top",
      end: "+=100%",
      scrub: 0.6,
      pin: stage,
      anticipatePin: 1
    }
  })
  .fromTo(dot, {scale:0.1}, {scale:1.6, ease:"none"})
  .to(dot, {scale:0.1, ease:"none"});
});