Need help with smooth scrolling

July 21, 2024

Hi, I am new to GSAP and I would like to implement smooth scrolling in my React project. I have three different sections in my landing page, and as soon as I scroll down, I would to go to my second section(drive). I am using a scroll tracker(handle scroll) to trigger my animation, as soon as I scroll down to a certain point(20 in this case). The code does not seem to work exactly the way I want to, it oscillates when I move from hero section to drive section. I don't understand why, can someone please explain what is wrong with my code?. Please excuse my code format, I am experimenting with GSAP

import './landing2.css';

import {delay, motion} from 'framer-motion';

import Img from './Tire-Tracks.png';

import Bike from './bike.jpg';

import Brad_Pitt from './bradpitt.jpg';

import { stagger } from 'framer-motion/dom';

import { useEffect, useRef, useState } from 'react';

import { useScroll } from 'framer-motion';

import { Opacity, X } from '@mui/icons-material';

import { duration } from '@mui/material';

import Bike1 from './bike1.jpg';

import Bike2 from './bike2.jpg';

import Bike3 from './bike3.jpg';

import Bike4 from './bike4.jpg';

import Boike from './boike3.jpg';

import Keys from './keys.jpg';

import gsap from "gsap";

import ScrollTrigger from "gsap/ScrollTrigger";

import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

import { Tween } from 'gsap/gsap-core';

gsap.registerPlugin(ScrollTrigger,ScrollToPlugin);

export default function Landing()

{

const [state1,updatestate1]=useState(0);

const [scrollPosition, setScrollPosition] = useState(0);

const scrollRef = useRef();

var oldvalue=20;

var section_one=true;

var section_two=false;

var section_three=false;

const handleScroll = () => {

const position = window.scrollY;

// if(position>oldvalue)

// {

// gsap.to(".section2",{top:"-730",duration:1.2,ease:"circ.in",scrollTrigger:{target:".section2"}})

// }

console.log(position,oldvalue);

if(position>oldvalue&&section_two==false)

{

gsap.to(window, { duration: 0.5, scrollTo: 900});

section_two=true;

section_one=false;

}

if(position<oldvalue&&section_two==true)

{

gsap.to(window, { duration: 0.5, scrollTo: -900});

section_one=true;

section_two=false;

}

setScrollPosition(position);

// if(position<oldvalue)

// {

// gsap.to(".section2",{top:"0",duration:1.2,ease:"circ.in",scrollTrigger:{target:".section2"}})

// }

oldvalue=position;

};

useEffect(()=>{

scrollRef.current = handleScroll;

window.addEventListener('scroll', scrollRef.current);

gsap.to(".drive>img",{clipPath:"polygon(100% 0%,0% 0%,0% 100%,100% 100%)",duration:1,ease:"power4.inOut",stagger:0.25,delay:0.4,scrollTrigger:{target:".drive"}});

gsap.to(".drive",{scale:1.25,duration:3,ease:"power3.inOut",delay:0.4,scrollTrigger:{target:".drive"}});

gsap.to(".imagecontainer",{clipPath:"polygon(100% 0%,0% 0%,0% 100%,100% 100%)",scale:1.06,duration:3,ease:"power4.inOut",scrollTrigger:{target:".midnight"}});

return () => {

window.removeEventListener('scroll', scrollRef.current);

};

},[]);

const ref1=useRef(null);

const dukie=

{

roll:{x:"-118.5%"},

roll1:{x:"-128.5%"}

}

const variants={

open:{x:"-300%"},

closed:{x:0},

open1:{x:"-150%"},

closed1:{x:0}

}

const smallscrollvariants={

roll:{x:"-200%"},

roll1:{x:"-200%"}

}

const child={

transition:{staggerChildren:50.2}

}

const varianting={

duke:{Opacity:1,y:"-20%"}

}

return (

<div>

<motion.div animate="transition" variants={child}>

<motion.h1 className='parallelax' animate={"roll"} variants={dukie} transition={{ repeat: Infinity, duration: 45 }}>THIS IS YOUR LIFE AND IT IS ENDING ONE MINUTE AT A TIME</motion.h1>

</motion.div>

<motion.div className='smallscroll' variants={smallscrollvariants} animate={"roll"} transition={{repeat:Infinity, duration:30}}>

<h1>adventurer</h1>

<h1>dirt bikes</h1>

<h1>motorcycles</h1>

<h1>mountain bikes</h1>

<h1>chopper</h1>

<h1>cruiser</h1>

</motion.div>

<motion.div className='smallscroll1' variants={smallscrollvariants} animate={"roll1"} transition={{repeat:Infinity, duration:38}}>

<h1>adventurer</h1>

<h1>dirt bikes</h1>

<h1>motorcycles</h1>

<h1>mountain bikes</h1>

<h1>chopper</h1>

<h1>cruiser</h1>

</motion.div>

</div>

</div>

</div>

<h1 className='shoottothrill'>WHY BUMBLEBEE?</h1>

<p1 className='shoottothrillpara'>Find deals on all kinds of drives — from the everyday to the extraordinary — complete with a better, more convenient experience versus rental car companies. Find the perfect vehicle for your budget, starting at $25 per day.</p1>

<h1 className='shoottothrill2'>Free cancellation</h1>

<p1 className='shoottothrillpara1'>Cancel for a full refund up to 24 hours before your trip starts. Because life happens and it helps to be flexible when it does.</p1>

<h1 className='shoottothrill3'>Convenient delivery options</h1>

<p1 className='shoottothrillpara2'>Get your car delivered right to you or wherever you’re going. Many hosts offer delivery to custom locations or popular points of interest like airports, train stations, and hotels.</p1>

</div>

<h1 className='dukie'>How BUMBLEBEE WORKS</h1>

<h1 className='dukie1'>Find the perfect car</h1>

<p1 className='dukiepara'>Enter a location and date and browse thousands of cars shared by local hosts.</p1>

<p1 className='dukiepara1'>Book on the Turo app or online, choose a protection plan, and say hi to your host! Cancel for free up to 24 hours before your trip.</p1>

<p1 className='dukiepara2'>Have the car delivered or pick it up from your host. Check in with the app, grab the keys, and hit the road!</p1>

</div>

)

}

July 22, 2024

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better.

July 23, 2024

Hi again, I just started a new project and I have a simple animation which comes into play as soon as I scroll down. I have a scroll variable which keeps track of my current scroll-y position. As soon as it exceeds a certain point, the view port should scroll down to a new section(from div className="beforesunrise" to div className="beforesunset"). The animation works fine, but as soon as I go to a new section, I can't use my scroll bar. Is there any reason why this is happening?, is there any way to override this?. My CODE-

export default function Landing_One()

{

const [scrollvariable,setScrollvariable]=useState(0);

const reference=useRef();

const scrollpos=()=>{

const position=window.scrollY;

setScrollvariable(position);

if(position>20)

{

gsap.to(window, { duration: 2, scrollTo: ".beforesunset"});

}

useEffect(()=>{

reference.current=scrollpos;

window.addEventListener('scroll',reference.current);

},[])

return (

<h1>scroll position:{scrollvariable}</h1>

</div>

</div>

</div>

)

}

July 23, 2024

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:

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. ✅

Finally you should look into ScrollTrigger's docs, especially the part about snapping:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap

Notifications

Messages

Need help with smooth scrolling

Recommended Posts

I drive

GSAP Helper

I drive

GSAP Helper

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members