How to achieve smooth scrolling in react
Hi Folks,
I came across this site website "https://olaolu.dev/" and i'm trying to recreate this using React and SASS. Now i have no idea how he managed to achieve the scroll for each pages. i don't know how it smoothly scrolls to next page. Can somebody help me on this
30 Replies
tried but not getting the same result
they might be using a library then, there's a lot of steps to those scrolling behaviors.
https://codesandbox.io/s/lively-sunset-fxvtmm
here is the code setup
ItZmEkAtHiR
CodeSandbox
lively-sunset-fxvtmm - CodeSandbox
lively-sunset-fxvtmm by ItZmEkAtHiR using loader-utils, react, react-dom, react-scripts
can someone help me to achieve this ?
@Jochem if you could suggest something or try to acieve this in the above codesandbox that would be helpful
so that's your code and the current scrolling affect isn't what you want?
@Kathirvel Swamy luckily for you, olaolu made his website open source on his github and i found the smooth scrolling function he created
GitHub
olaolu.dev/landing/src/helpers.js at 5fbdac651c86d18dbce43d4d29922d...
🤺Olaolu's website & shelf. Contribute to whizkydee/olaolu.dev development by creating an account on GitHub.
hopefully this helps you accomplish what youre wanting :)
that is on vue js, can anyone knows a better way or library in react
thanks anyway @mätthew
oh i see, i missed the part where you said "recreate using react and sass" my bad 😭
@Kathirvel Swamy the function matthew linked to isn't vue specific, it's purely vanilla as far as I can tell at a quick glance
it should work just fine for React
the problem is i don't know how that thing works
Lenis scroll is pretty good. Should work on any framework.
Lenis – Get smooth or die trying
A new smooth scroll library fresh out of the Studio Freight Darkroom
Its simple to use as well.
The smooth scroll “html/css default” works or behaves as expected only on mac afaik. When I tried on windows, its clunky as hell. Only way I was able to actually get smooth scrolling was using a third party library. Locomotive, lenis and so on.
their website is insane
Haha ye these guys are good.
@Ylli any example projects or could you pls acheive this here
https://codesandbox.io/s/lively-sunset-fxvtmm
ItZmEkAtHiR
CodeSandbox
lively-sunset-fxvtmm - CodeSandbox
lively-sunset-fxvtmm by ItZmEkAtHiR using loader-utils, react, react-dom, react-scripts
If you mean the scrolling part here is a project I've done in the past to confirm if that is what you want.
@Kathirvel Swamy
Estudio Persona
Chair exploration
If you are still having trouble, I would check out GSAP.
ScrollSmoother | GSAP | Docs & Learning
ScrollSmoother adds a vertical smooth-scrolling effect to a ScrollTrigger-based page. Unlike most smooth-scrolling libraries, ScrollSmoother leverages NATIVE scrolling - it doesn't add "fake" scrollbars nor does it mess with touch/pointer functionality. That means it doesn't suffer from many of the accessibility annoyances common with smooth-scr...
GSAP is a bit more complicated for animations especially if you are using React.
For scrolling alone I'd simply use Lenis,
for animations "in react" I think framer-motion is easier + more recommended afaik.
GSAP is amazing but a bit harder to understand, and some of more advanced 'stuff' is locked under a subscription.
The good thing about GSAP though is that you can run it anywhere just as easy once you understand it.
Sure but that is because React is React
Also GSAP has good docs about how to work with React 😉
Yes, GSAP has great docs.
@Ylli i've achieved the same thing in codesandbox check this out.
https://codesandbox.io/s/lively-sunset-fxvtmm
what i actually want is a scroll like https://olaolu.dev/
ItZmEkAtHiR
CodeSandbox
lively-sunset-fxvtmm - CodeSandbox
lively-sunset-fxvtmm by ItZmEkAtHiR using @studio-freight/react-lenis, loader-utils, react, react-dom, react-scripts
Olaolu Olawuyi
Olaolu Olawuyi: Frontend developer and UX Engineer.
Olaolu Olawuyi is a UX Engineer and Frontend developer highly skilled at design systems and progressively enhanced web applications.
Ok I see. I think what you are looking for is animated snap.
From my memory you can find the answer to your question here:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/
(CHECK Advanced Example) --
I'd be willing to test/try to make it for you my self but I'm a bit busy now, sorry.
ScrollTrigger | GSAP | Docs & Learning
ScrollTrigger enables anyone to create jaw-dropping scroll-based animations with minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.
found the solution guys, thanks anyway
here is the implementation
https://codesandbox.io/s/css-snap-smoth-scroll-jv7gd6
ItZmEkAtHiR
CodeSandbox
css-snap-smoth-scroll - CodeSandbox
css-snap-smoth-scroll by ItZmEkAtHiR using @studio-freight/react-lenis, loader-utils, lodash, react, react-dom, react-scripts
if someone able to refine this, that would be appreciated