Make smooth scroll

Custom code
1

Hello, I’m designing a web and I’m trying to make a smooth scroll like this.

Does anyone know how to embed this code to make it work?

Thanks

2

try this instead:

3

Please friend, could you teach me step-by-step how to implement this smooth scrolling effect within Readymag. I’m extremely noob about how to do this and where to put each HTML code, Javascript…etc etc. :confused:

4

Hey i’ve tried pasting the code on before body and is not working.
Trie using only css: html {
scroll-behavior: smooth;
}

also not working

5

have you set up the “magicscroll.umd.js” file as a script? Otherwise it won´t work…

6

Hey I’ve followed the guide of the author’s github - magic-scroll/README.md at master · mudin/magic-scroll · GitHub

I’ve pasted magicscroll.umd.js script on head
src=“https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js”

and the js code after body

let magicScroll = new MagicScroll({
  target: document.querySelector(".scroll-view.after"), // for body, no need to set target
  speed: 80,
  smooth: 12
});

Everything between script tags, but doesn’t seem to work. Also tried lennis and not working. And using F12, page seems to load the JS without showing any errors.

My page is paaulacalvo.com

7

ok… the selector needs to be changed.
if your pageorder is horizontal it needs to be:

let magicScroll = new MagicScroll({
  target: document.querySelector(".content-scroll-wrapper"), // for body, no need to set target
  speed: 80,
  smooth: 12
});

and if the page order is vertical it would be:

let magicScroll = new MagicScroll({
  target: document.querySelector(".overflow-on-vertical-view"), // for body, no need to set target
  speed: 80,
  smooth: 12
});
8

Don’t wanna bother but I’ve tried on another project, pastin js cdn link onto header and after body, non of them worked, and also using either horizontal and vertical code, non of them working. I can’t make it work, am I doing something wrong?

9

try to wrap your code into a setTomeout:

 setTimeout(function() {


let magicScroll = new MagicScroll({
  target: document.querySelector(".content-scroll-wrapper"), // for body, no need to set target
  speed: 80,
  smooth: 12
});



}, 1000);
10

Hey how are you, I’ve been testing out Squarespace to see if Lenis worked there and It did.
Now I’ve tried it on Readymag pasting the same code I had on Squarespace but not working here on RM.
I think it’s a problem of Readymag or something, dunno.

src=“https://unpkg.com/lenis@1.2.3/dist/lenis.min.js”
rel=“stylesheet” href=“https://unpkg.com/lenis@1.2.3/dist/lenis.css”

// Initialize Lenis
const lenis = new Lenis({
smooth: true,
duration: 1.5,
smoothTouch: true,
lerp: 0.3,
});

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

Had to take tags out as code wasn’t showing here.