Horizontal scroll gives height to body

[Cureosity]

Hey guys! I`m new around here and I have a problem with horizontal scroll... I tried my best but I can`t solve the problem. The problem is when scrolltrigger runs it gives height to body and its really frustrating. Can anyone help me please?

 

I dont know how to add react next code to codepen but I attached a video about the problem.

Here is my code:

 

import React from "react";
import type { NextPage } from "next";
import styles from "../procedures/Procedures.module.css";
import Image from "next/image";
import {useLayoutEffect, useRef, useState, useEffect} from "react";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";



function Procedures() {
  gsap.registerPlugin(ScrollTrigger);
  
  useEffect(() => {
    const sections = gsap.utils.toArray(".procedures-card-wrapper");

    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".procedures",
        pin: true,
        invalidateOnRefresh: true,
        anticipatePin: 1,
        scrub:1.5,
        markers: true,
        end: () => "+=150" 
      }
    });
  }, []);

  return (
    <div className="procedures">
      <div className="procedures-title">
        <div className="procedures-title-1">Doktor Sait Gokhan Bircan</div>
        <div className="procedures-title-2">Procedures</div>
      </div>
      <div className="procedures-slider">
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
        <div className="procedures-card-wrapper">
          <a href="#" className="procedures-card">
            <Image
              src="/images/procedures-dummy.png"
              alt="Logo"
              width="440"
              height="440"
            />
            <div className="procedures-overlay"></div>
            <div className="procedures-card-content">
              <div className="procedures-card-title">Hair Transplant</div>
              <div className="procedures-card-text">
                Many people with baldness issues may choose to have a hair
                transplant, mainly performed from the back of the head, chest
                and beard. The hair roots can be removed from those different
                areas during the process. In general, hair transplantation is
                preferred by people with baldness on the upper part of the head.
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  );
}

export default Procedures;

 

[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 CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

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

[mvaneijgen]

Hi @Cureosity if you are using React you can use CodeSandbox here is a setup with React, keep in mind that a minimal demo is not your whole project.

 

It looks like you are looking for pinSpacing: false, but that will make it so the next block will scroll behind the pinned block. You can do a few things. Have the next block be part of the pin. Make the white background the same color as the  pinned block or give the pinned block a height of 100vh. 

[Cureosity]

Hey guys, thanks a lot for your interest about my issue, I am basically trying to do a section like this codepen with cards. But my cards not in full width as you see in the video.

See the Pen mdrrbyo by oldskool123 (@oldskool123) on CodePen

[mvaneijgen]

1 hour ago, mvaneijgen said:

You can do a few things. Have the next block be part of the pin. Make the white background the same color as the pinned block or give the pinned block a height of 100vh. 

I don't know what else to tell you. And without a minimal demo it is hard to help you. 

[Rodrigo]

Hi,

 

The main consideration in a case where the slides/cards width is less than the screen width, is that the setup has to be quite different. When the sections have the screen width the CSS is quite simple and the container's width is the number of slides in percentage. So 4 slides is 400% and so forth. Then we just use xPercent for the values and that's it.

 

In this case you need to set the value of the animation on the x axis based on the width of the screen and the width of the cards container and be sure to use a function-based value so it's updated when ScrollTrigger refresh method runs after a screen resize.

 

Here is a live example:

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

 

Finally, regarding snapping in this case is a bit more complex due to the fact that depending on the screen width will be the amount of elements initially visible and also you have to consider the separation between them (if any) and perhaps a few other factors as well.

 

Hopefully this is enough tot get you started. Let us know if you have any other question.

 

Happy Tweening!

[GreenSock]

One other thing - it sounded like maybe your sections aren't 100vh and you wanted a way to eliminate the "space" underneath while pinned, right? You can just wrap all your content in a container <div> and pin THAT element instead (sorta like pinning the whole page). If you still need help, a minimal demo (like a CodePen) will go a very long way in getting you a solid answer. 👍

[Cureosity]

Hey guys thank you for helping! @Rodrigo`s answer is fixed my problem. But I got a new problem. I thinks is easy to solve. I need to kill my scrollTrigger in mobile. How can I do that? Thanks again!!

[mvaneijgen]

@Cureosity have you seen the matchMedia function?