Parallax Cover Image with GSAP

using class “.gomo-parallax” and a GSAP function

gsap.registerPlugin(ScrollTrigger);
function initGomoParallax() {
  gsap.utils.toArray(".gomo-parallax").forEach(function (coverParallax) {
    var imageParallax = document.getElementsByClassName(
      "wp-block-cover__image-background"
    );
    gsap
      .timeline({
        scrollTrigger: {
          trigger: coverParallax,
          scrub: true,
          start: "top bottom",
          end: "bottom top",
          markers: true,
        },
      })
      .fromTo(
        imageParallax,
        {
          y: -100,
          scale: 1.5,
        },
        { y: 100, scale: 1.5, ease: "none" },
        0
      );
  });
}
window.addEventListener("load", function () {
  initGomoParallax();
});

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited