[Dragging through liquid effect]

Ooo thank you so much 

[Freelance for a site with multiple gsap animations]

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

[Hello! Any idea how I could go about making something like this:]

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. 

[Hello! Any idea how I could go about making something like this:]

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. 

[ScrollTrigger snap and inertia plugin?]

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. 

[GSAP Scroll Trigger isn't working with Smooth Scrollbar (React/Gatsby)]

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 :)) 

[ScrollTrigger snap and inertia plugin?]

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. 

[GSAP Scroll Trigger isn't working with Smooth Scrollbar (React/Gatsby)]

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);

 

}

}, []);