ScrollTrigger Issues and Idea for the best approach

[Vasil]

Hello, amazing people!

I am currently recreating my website, however, I have some questions and need suggestions.

 

I don't have a codepen, but I can attach the code (it's not too long) and I can send you a link to my sandbox. - https://gdesign.newww.website/

Can you give me an idea how can I keep on every device and resolutions my hero section + the welcoming title in the exact center of the screen, right now I am accomplishing this with 100vw and 100vh, where I have the SVG designed so the monitor is in the exact center, however on lower monitor height I have this white space between the sections (because of the min-height 100vh), but If I make the image relative and height: auto, the monitor won't be centered with the titles.

Here is the whole code for this page, I have a few more triggers:

 

function createDesktopAnimation() {
  const tlDesktop = gsap.timeline();

  tlDesktop.fromTo(
    ".monitor-wrapper",
    { scale: 5, force3D: false, transformStyle: "flat" },
    {
      scrollTrigger: {
        trigger: ".desktop",
        start: "top top",
        end: "bottom -400%",
        scrub: true,
        pin: true,
      },
      scale: 1,
    }
  );
}

function createTabletAnimation() {
  const tlTablet = gsap.timeline();

  tlTablet.fromTo(
    ".monitor-wrapper",
    { scale: 1 },
    {
      scrollTrigger: {
        trigger: ".desktop",
        start: "top top",
        end: "bottom bottom",
        scrub: false,
        pinSpacing: false,
        pin: false,
      },
    }
  );
}

function createMobileAnimation() {
  const tlMobile = gsap.timeline();

  tlMobile.fromTo(
    ".mobile-screen",
    { scale: 3.6, force3D: false },
    {
      scrollTrigger: {
        trigger: ".mobile-container",
        start: "top top",
        end: "bottom -200%",
        scrub: true,
        pin: true,
      },
      scale: 1,
    }
  );
}

function createHomerDesktopAnimation() {
  const tlHomerDesktop = gsap.timeline();

  tlHomerDesktop.fromTo(
    ".homer-brain",
    { scale: 36, force3D: false, transformStyle: "flat" },
    {
      scrollTrigger: {
        trigger: ".homer-container",
        start: "top top",
        end: "bottom -500%",
        scrub: true,
        pin: true,
      },
      scale: 1,
    }
  );
}

function createHomerMobileAnimation() {
  const tlHomerMobile = gsap.timeline();

  tlHomerMobile.fromTo(
    ".homer-brain",
    { scale: 80, force3D: false, transformStyle: "flat" },
    {
      scrollTrigger: {
        trigger: ".homer-container",
        start: "top top",
        end: "bottom -300%",
        scrub: true,
        pin: true,
      },
      scale: 3.5,
    }
  );
}

ScrollTrigger.matchMedia({
  "(min-width: 1120px)": createDesktopAnimation,
  "(min-width: 993px) and (max-width: 1119px)": createTabletAnimation,
  "(min-width: 320px) and (max-width: 992px)": createMobileAnimation,
});

ScrollTrigger.matchMedia({
  "(min-width: 1120px)": createHomerDesktopAnimation,
  "(max-width: 1119px)": createHomerMobileAnimation,
});

ScrollTrigger.batch(".stickman", {
  toggleClass: "active",
  once: true,
});


2. My second question, I can notice some glitches, on the rest of the scroll triggers (Homer at the bottom for example :D), let's say I scroll too fast to the bottom from the top or I refresh the page and start from bottom to the top. In those cases, we can see weird glitches as well as some trouble with the scroll in general. How can I fix this or at least what is the cause?


Thank you so much, sorry for the weird code share... 

[mvaneijgen]

Without a minimal demo this will me hard to debug. Having things not centred on mobile devices, sounds more like a CSS issue. What does it look like if you disable GSAP, I have the feeling the same. Have you seen https://gsap.com/docs/v3/GSAP/gsap.matchMedia() with it you can write device breakpoints like you do in CSS an thus you can load custom javascript for different screen sizes.

 

The only thing I can see that is weird is that you have a lot of ScrollTriggers, you hardly need more then one. My advise create a timeline of your animation and hook that up to one ScrollTrigger. Also it is better to animate from a big picture to a small one, right now you animate .fromTo() scale: 36, to 1 it is beter to create a picture that is really big at scale: 1 and than animate to 0.36 scale. (easier for the browsers to render) Last tip I can give you without seeing a minimal demo, you're using a lot of .fromTo() where a .from() would suffice, GSAP is smart and if you tell it to animate .from() scale: 36 it will imply that you want to animate to the browsers default eg scale: 1 so you don't have to write out a whole .fromTo()

 

If you still need help after these tips, please include a minimal demo (this is not you whole project, just some coloured divs that demonstrate the issue) Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Hope it helps and happy tweening! 

[Vasil]

Thank you, I will consider making those changes.
 

[Vasil]

Okay... I am open for other ideas

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates 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 dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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.