So I don’t know if this is somehow related to ThreeJS or not or just a shader…Can someone direct me where or what I learn this stuff cause I wanna do this kind of animation thing.
as you see the image looks like its bending when scrolling or just may animating itself the curvy picture style.
Can anyone suggested me where can I learn this? Thanks a lot.
You need cloth with wind?
https://raw.githack.com/looeee/three.js/bd67e75c805c0b261b8606e74a4d77ed8b336a7c/examples/webgl_animation_cloth.html
not really somehow like this…Basically something like this but I don’t want to use react-three-fiber cause it feels like its not informational to me.
Understood. Bending+ texture zoom in-out.
so what kind of lesson or where can I learn this stuff?
Hi @Myth_Xenodo
In my opinion, to have a similar effect, you need to separate the two problems:
Only the point two has threejs dependency… so first of all you need something like GSAP with scrollTrigger addon to detect scrolling, it’s not very heavy to apply, you just need to get some practice.
There are others solutions too, but in my opinion GSAP is a good and all-in-one solution (tweening, scrolling, svg transformation and more …), it is used a lot in conjunction with threejs and you can find many code samples
codepen scrollTrigger gallery
also in threejs conjunction
here a very good example from Steve Gardner
In this example the render is performed only on the scrolling change, while in your examples the rendering is continuous (otherwise the veils do not flutter) but with the right changes you can do whatever you want.
I hope you find it useful as a starting point for your developments
oh thanks I have already knowledge in gsap just a bit problem with shaders hahaha…
Done.
From that example, it doesn’t look that you even need threejs to achieve that. You could do that with pure css/js
that sound’s impossible to me…hahah give me a sample then. @joaogardenberg
You can achieve that with observing the scroll position and dynamically adding css properties to the elements:
Btw, the response was about that comment of yours, and not the main one:
As showed here:
