Clearly Vinay

Ooo thank you so much

This is exactly something I would wanna make. Hope I'm not too late clearlyvinay@gmail.com

Oh I see - I'm not famiilar with WebGL so I was quite stumped haha XD Thank you , you have been very useful I will try making a codepen and sharing it here so if someone stumbles upon it , it would be of help.

https://qodeinteractive.com/magazine/wp-content/uploads/2020/10/Bounds.mp4 The way the menu moves like its the inside of a circular shape as you move the mouse to be specific.

Oh I see - lemme know if there's any way I can help. I would really have loved the snap effect but it's not a deal breaker for my project so no rush.

Hey , yeah my bad I've been reading gsap forums for a while but that was my first reply - completely slipped my mind inspite of knowing the rules. Anyway I got smooth scroll working on my project with the help of another library called asscroll. Still have no clue why it wouldn't work with bodyScroll. Oh well thanks for the reply :))

Hey I tried the demo on my PC and it doesn't snap at all - instead it inches a bit and stops midway never finishing the snap.

I copy pasted this bit into my Gatsby project and the page won't even scroll ! I don't get what in doing wrong ughhh useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []); useEffect(() => { gsap.to('body', 0, {css: {visibility: 'visible'}}); const tl = gsap.timeline(); tl.from('.line span',1.6, { y: 400,ease: Power3.easeOut,delay: .2,skewY: 7,stagger: { amount: 0.3 },}) .from('.line_small span',1.2, { y: 100,ease: Power3.easeOut, delay: .2,skewY: 7,stagger: { amount: 0.3 }}, .1) ; gsap.registerPlugin(ScrollTrigger); gsap.to('.image_float', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'bottom top', scrub: .1, id: 'image-float' }, y: -50, ease: 'none', duration: 2 }); gsap.to('.line', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'center top', scrub: .1, id: 'lines' }, y: -50, ease: 'none', duration: 2 }); }, []) return ( sorry, I've got some other things there but I guess this is it: useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []);