Is this a shader or a threejs animation type?

Questions
1

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.

2

You need cloth with wind?
https://raw.githack.com/looeee/three.js/bd67e75c805c0b261b8606e74a4d77ed8b336a7c/examples/webgl_animation_cloth.html

3

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.

4

Understood. Bending+ texture zoom in-out.

5

so what kind of lesson or where can I learn this stuff?

6

While i think just need to use his shader code CustomMaterial.js

image
image704×733 73.1 KB

1 Like
7

Hi @Myth_Xenodo

In my opinion, to have a similar effect, you need to separate the two problems:

  1. detect scrolling
  2. transform/animate/costumize your 3d elements based on your scrolling detection

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

8

oh thanks I have already knowledge in gsap just a bit problem with shaders hahaha…

9

Done.

1 Like
10

From that example, it doesn’t look that you even need threejs to achieve that. You could do that with pure css/js

2 Likes
11

that sound’s impossible to me…hahah give me a sample then. @joaogardenberg

12

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:

image
image944×441 42.1 KB

As showed here:
image