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
try this instead:
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. 
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
have you set up the “magicscroll.umd.js” file as a script? Otherwise it won´t work…
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
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
});
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?
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);
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.
Someone can help me?
you can find the answer in this thread!!
make sure its wrapped inside a settimeout and assign a target!!
I wrapped it inside a settimeout and assigned a target, although I don’t know if my code is set right because it’s still not working. Thanks for helping, I’ve never used JavaScript before, especially in ReadyMag, so I don’t know what I’m doing.
<script src=https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js> setTimeout(function() {
let magicScroll = new MagicScroll({
target: document.querySelector(".overflow-on-vertical-view"), // for body, no need to set target
speed: 80,
smooth: 12
});
}, 1000);
</script>
nearly made it!
first put this in the head section:
<script src=https://unpkg.com/magic-scroll.js/dist/MagicScroll.umd.js></script>
and then this in the “before body” section:
<script> setTimeout(function() {
let magicScroll = new MagicScroll({
target: document.querySelector(".overflow-on-vertical-view"), // for body, no need to set target
speed: 80,
smooth: 12
});
}, 1000);
</script>
you mixed it up a bit.
Thanks! I tried it, and it still doesn’t work. Is MagicScript just off? Here’s what I did:
Left Widget Code empty
Applied the .js script in “HEAD”
Applied the setTimeout script in the “Before /BODY” section
Went to Preview and tried the scroll, and it does not work. Heres my test URL:
hmm.. looks correct. pls change the timeout to 2000 or even 5000 to check if the code is kicking in too early.
edit:
I found the problem… the “.overflow-on-vertical-view” wasnt right, it needs to be “.content-scroll-wrapper”
<script> setTimeout(function() {
let magicScroll = new MagicScroll({
target: document.querySelector(".content-scroll-wrapper"), // for body, no need to set target
speed: 80,
smooth: 12
});
}, 1000);
</script>
Omg. It’s so close. I applied your correction and it worked…sort of. It smooth scrolls but bounces around. I tried different speed and smoothness levels and nothing seems to work? Example applied on my main page:
I don’t know if switching to Lenis’s code might be better