Cureosity Posted October 19, 2022 Share Posted October 19, 2022 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; Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 19, 2022 Share Posted October 19, 2022 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 19, 2022 Share Posted October 19, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cureosity Posted October 19, 2022 Author Share Posted October 19, 2022 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 19, 2022 Share Posted October 19, 2022 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted October 19, 2022 Share Posted October 19, 2022 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! 3 Link to comment Share on other sites More sharing options...
GreenSock Posted October 19, 2022 Share Posted October 19, 2022 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. 👍 1 Link to comment Share on other sites More sharing options...
Cureosity Posted October 21, 2022 Author Share Posted October 21, 2022 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!! Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 21, 2022 Share Posted October 21, 2022 @Cureosity have you seen the matchMedia function? 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now