Cómo hacer crecer y encoger un punto con GSAP al desplazarse por la página
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!