Revelación de Imagen Atractiva para Elementor

Si estas cansado de utilizar los tradicionales motions effects de Elementor, quedate tranquilo que con este tutorial vas a poder darle un efecto original a las imágenes de tu web. Además, te va a servir tanto para la versión Pro como Free de Elementor, asi que no vas a tener excusa.

Código para Insetar en HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<style>
    .reveal {
       overflow: hidden;
    }
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".reveal");

revealContainers.forEach((container) => {
  let image = container.querySelector("img");
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      toggleActions: "restart none none reset"
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
    xPercent: -100,
    ease: Power2.out
  });
  tl.from(image, 1.5, {
    xPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});

</script>

Código para Insetar en HTML:

Entradas Relacionadas

Deja un comentario Cancelar respuesta