Animation changed after the deployment

[Nunushosho]

Hello guys,

 

I am currently in the process of learning how to use Gsap, and I have added an animation to my hero section where the text is supposed to decrease in font size and move to the left while simultaneously the image increases in size as we scroll down. Now, the animation looks okay when I run it on my local host, but for some reason, when I deploy it and check from my phone, more padding gets added, like some sort of glitch. I am not sure what is causing this issue, if anyone can try and help me I would really appreciate it. I am new to this and i would appreciate any kind of help thank you.

 

The link for my github repo:  https://github.com/NouranAlSharawneh/wael_portfolio

And the live link: https://wael-alsharawneh.vercel.app/

import { useRef, useEffect } from "react";
import gsap from "gsap";
import heroImage from "../../public/assets/hero.webp";

const Hero = () => {
  const titleRef = useRef(null);
  const imageRef = useRef(null);
  const heroSectionRef = useRef(null);

  const useGsap = () => {
    useEffect(() => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: heroSectionRef.current,
          start: "top top",
          end: "bottom top",
          scrub: 2,
          pin: true,
          pinSpacing: false,
          // markers: true,
        },
      });

      tl.to(titleRef.current, {
        fontSize: () => {
          if (window.innerWidth < 768) {
            return "1.5rem";
          }
          return "3rem";
        },
        x: () => {
          if (window.innerWidth < 768) {
            return -15;
          }
          return -25;
        },
        y: () => {
          if (window.innerWidth < 768) {
            return -5;
          }
          return 0;
        },

        paddingTop: () => {
          if (window.innerWidth < 768) {
            return "0rem";
          }
        },
        paddingLeft: "1.3rem",
        ease: "power1.out",
        backgroundColor: "var(--bunker-blue)",
      });

      tl.to(imageRef.current, {
        scaleX: () => {
          if (window.innerWidth < 768) {
            return 1.1;
          }
          return 1.01;
        },
        scaleY: 1,
        ease: "power1.out",
      });

      tl.to(heroSectionRef.current, {
        paddingLeft: "0.8rem",
        paddingRight: "0.8rem",
        ease: "power1.out",
      });

      return () => {
        if (tl) {
          tl.kill();
        }
      };
    }, []);
  };

  useGsap();

  return (
    <section ref={heroSectionRef} className="hero-section">
      <div className="content">
        <h1 ref={titleRef}>
          Urban <span>Space </span>
        </h1>
        <div className="img">
          <img ref={imageRef} src={heroImage} alt="Hero" />
          <div className="hero-text">
            <p>
              <span>-Since 2010</span>
              Architecture, Bold Designs, Planning
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;

.hero-section {
  height: 100dvh;
  background-color: var(--bunker-blue);
  overflow-x: hidden; /* Prevent horizontal scrolling */
  transition: padding-left 0.9s ease-out, padding-right 0.9s ease-out; /* Smooth padding transition */
}

.content {
  padding: 0 3rem;
  padding-top: 4.5rem;
  position: relative;
}

.content h1 {
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  padding-right: 6rem;
  padding-bottom: 1rem;
  outline: 1rem solid transparent;
  font-size: 9.5rem;
  font-weight: 500;
  background-color: var(--bunker-blue);
  text-transform: uppercase;
  position: absolute;
  transition: font-size 0.9s ease-out;
}

.content h1 span {
  font-weight: 100;
}

.content .img img {
  position: relative;
  object-fit: fill;
  width: 100%;
  height: 85dvh;
  border-radius: 1rem;
  transition: transform 0.9s ease-out;
}

.hero-text {
  position: absolute;
  top: 45%;
  left: 10%;
  width: 6rem;
}

.hero-text p {
  font-weight: 200;
}

.hero-text span {
  line-height: 1.5;
  font-weight: 100;
  display: inline-block;
  font-size: 0.7rem;
}

@media screen and (max-width: 768px) {
  .content {
    padding-top: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .content h1 {
    width: 100%;
    font-size: 3rem;
    padding-right: 1rem;
    clip-path: polygon(0 0, 90% 0, 70% 100%, 0% 100%);
  }

  .hero-text {
    left: 15%;
  }
}

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mvaneijgen]

Hi @Nunushosho welcome to the forum!

 

To get the most out of this forum always post a minimal demo with your issue, that way anyone who has time to help you can dive directly in to the code and start tweaking things to help you debug. 

 

From the snippet you've posted it looks like you're using useGSAP and useEffect together, which should not be the case. useGSAP replaces useEffect to fix all the issues that are caused with that function. Take another loo at our React guide to learn how to use GSAP in React. 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

As @mvaneijgen points out this is completely unnecessary:

const useGsap = () => {
  useEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: heroSectionRef.current,
        start: "top top",
        end: "bottom top",
        scrub: 2,
        pin: true,
        pinSpacing: false,
        // markers: true,
      },
    });
    // ...
    return () => {
      if (tl) {
        tl.kill();
      }
    };
  }, []);
};

useGsap();

Just put everything inside the useGSAP Hook:

const useGsap = () => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: heroSectionRef.current,
      start: "top top",
      end: "bottom top",
      scrub: 2,
      pin: true,
      pinSpacing: false,
      // markers: true,
    },
  });

  tl.to(titleRef.current, {
    fontSize: () => {
      if (window.innerWidth < 768) {
        return "1.5rem";
      }
      return "3rem";
    },
    x: () => {
      if (window.innerWidth < 768) {
        return -15;
      }
      return -25;
    },
    y: () => {
      if (window.innerWidth < 768) {
        return -5;
      }
      return 0;
    },

    paddingTop: () => {
      if (window.innerWidth < 768) {
        return "0rem";
      }
    },
    paddingLeft: "1.3rem",
    ease: "power1.out",
    backgroundColor: "var(--bunker-blue)",
  });

  tl.to(imageRef.current, {
    scaleX: () => {
      if (window.innerWidth < 768) {
        return 1.1;
      }
      return 1.01;
    },
    scaleY: 1,
    ease: "power1.out",
  });

  tl.to(heroSectionRef.current, {
    paddingLeft: "0.8rem",
    paddingRight: "0.8rem",
    ease: "power1.out",
  });
};

Also why are you creating another instance of the useGSAP hook like this?

useGSAP();

That literally does nothing so is kind of a waste of resources IMHO 🤷‍♂️

 

Happy Tweening!