Cómo hacer crecer y encoger un punto con GSAP al desplazarse por la página

gato disfrazado de GSAP
Vamos a hacer que un punto en nuestra página crezca y se encoja mientras nos desplazamos por ella. Este efecto añadirá un toque de dinamismo y elegancia a tu sitio web.

Paso 1: Preparar el entorno Antes de comenzar, asegúrate de tener instalado WordPress y el plugin Elementor. Abre el editor de Elementor y crea una nueva página donde quieras agregar este efecto.

Paso 2: Agregar el código HTML Dentro del editor de Elementor, añade un nuevo elemento de HTML personalizado en la ubicación deseada de tu página.

				
					<div class="block block--1">
    <div class="dot"></div>  
</div>
<div class="block block--2"></div>

				
			

Paso 3: Agregar el código CSS Dirígete a la sección de personalización de tu tema de WordPress o al editor de CSS personalizado.

				
					.block {
    width: 100%;
    height: 50vh;
}

.dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150vmax;
    height: 150vmax;
    border-radius: 50%;
    background-color: #E34248;
    overflow-x: hidden;
}

				
			

Paso 4: Agregar el código JavaScript Ahora, necesitas añadir el código JavaScript para activar el efecto de crecimiento y encogimiento del punto. Puedes hacerlo en la sección de código de tu tema de WordPress o utilizando un plugin para añadir código personalizado. Copia y pega el siguiente código JavaScript:

				
					



    gsap.registerPlugin(ScrollTrigger);

    gsap.set(".dot", {xPercent: -50, yPercent: -50});

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".block",
            start: "top top",
            end: "+=100%",
            scrub: 0.5,
            pin: ".dot"
        },
    })

    tl.from(".dot", {
        scale: 0.1,
        repeat: 1,
        yoyo: true
    });


				
			

Paso 5: Guardar y publicar la página Finalmente, guarda los cambios en Elementor y publica la página en tu sitio web de WordPress. ¡Ahora podrás ver cómo el punto crece y se encoje mientras te desplazas por la página!

Con este sencillo tutorial, has aprendido cómo agregar un efecto de crecimiento y encogimiento a un punto en tu sitio web utilizando Elementor y GSAP en WordPress. Experimenta con diferentes configuraciones y personalizaciones para adaptar este efecto a tu diseño y marca personal. ¡Diviértete explorando las posibilidades creativas que ofrece esta técnica!

Más Recursos

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Black or White

El efecto “Black or White” crea la ilusión de que la página (o la imagen principal) está dividida en dos mitades de color.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Link-Tree personalizado! 🌐

👉 Con nuestro servicio de link-trees personalizados podrás: ✅ Mostrar tus enlaces más importantes en una interfaz visualmente atractiva. ✅ Reflejar tu identidad con colores, tipografías y estilos exclusivos. ✅ Aumentar la interacción y llevar tráfico directo a tus plataformas.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Integraciones 4.0

Domina el flujo de datos entre apps sin código
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Módulo 1: Fundamentos Avanzados de UI

Comprender y aplicar principios de diseño
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Image Accordion Slider with CSS and JS

🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

¿Qué es View Transitions?

View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.