I came across this website and I'm amazed by how smoothly it scrolls without any lag or stutter in animations. As a front-end developer with a few years of experience and having built various static websites, I'm curious if I've overlooked something crucial in creating smoother interactions. I tend to notice micro-stutters in my projects, regardless of whether I'm using Lenis, GSAP, or ScrollReveal for animations. What should I be checking or implementing in my projects to achieve that level of smoothness?
4 Answers
You might want to check out Lenis, it focuses on smooth scrolling. It could be what that website is using. Here's the link: [Lenis](https://lenis.darkroom.engineering/) for reference!
I agree, I didn't find it very smooth either, especially on mobile.
It's funny that people still criticize parallax effects over a decade later. Websites like this one often use libraries like [Swup](https://swup.js.org/) to manage transitions efficiently. To get that kind of effect, using a decent parallax framework, optimizing your assets, and deferring content load until it's visible can really help. But beware—it might not be ideal for an informational site due to performance variations across devices based on how browsers handle rendering and animations.
I think they're doing some clever stuff with CSS variables and animations, which offers a pretty seamless experience if implemented correctly. But, I can see how it might be a pain on lower-end devices.
Definitely smart tricks there, but the overall performance can be hit or miss depending on the device—my mobile struggled to keep up.
Right? Sometimes I wish for simpler sites with snappier scrolls over flashy effects!
Honestly, I noticed a lot of stutter in the hero background on that site. It wasn't super smooth for me, which makes me think it might have issues depending on the device.
I tried it on my phone and felt like the scroll acceleration was totally off. It seemed designed more for iPhone and didn't translate well to other devices.