The broadwick-live's intro from agni-saha

broadwick-live's Introduction

Original Website

Simple Smooth Scroll, although it can be achieved using CSS and JS also
Fixed elements scrolling while target is in view. I couldn't figure this one using JS and CSS. If I can, then I'll definitely remove Locomotive

First and foremost, the biggest problem is that we cannot use window.scrollY and/or document.body.scrollTop, and so position fixed, relative, absolute won't work here
Because of reason 1, I couldn't do the simple fixed navbar on scroll feature.
Fixing elements on scroll is not that easy here, because you need to put the contents of the target and the fixed element in the same grid. And so, a lot of hardcoded values are used here.
The documentation of locomotive scroll is pretty useless. The main thing that took me a lot of time to figure out is that every element that has data-scroll will have a progress property, which defines how much of the content is in view. This is the only way to check if the content is in view or not, since window and body scroll properties don't work here.

Responsiveness. I couldn't make it responsive, I don't feel like spending that amount of energy into this. Instead I'll work on other projects.
Loading animation. I think I can do this using GSAP or Framer Motion. I'll do it probably.
Fixing the navbar on scroll up and removing it on scroll down. I'm figuring this one right now.

Maybe there are some JS and CSS codes that I can get. If anyone can help me regarding this, it'll be highly appreciated.
Maybe intersection observer combined with JS/CSS can help me do the fixed element scrolling. I dunno tho.

Recommend Projects