Cureosity

Hey guys, I need something like this banner: https://www.superlist.com Not the animations but the mouse move thing. How can I do that with gsap? Thank you!

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!!

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. https://codepen.io/oldskool123/pen/mdrrbyo

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;