Jump to content
Search Community

Wave effect on list items while scrolling

Quang Anh test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello. I'm new to GSAP and I have a question. I have a list of items like this example site, and I want to make a "wave effect" that apply to picture items everytime I scroll. I figured out the scrolling part with ScrollTrigger onUpdate but the animated effect is very hard to understand to do. Can GSAP do like in the example, maybe a demo so I can understand more.
My gsap code:

let proxy = { scale: 1 };
let clamp = gsap.utils.clamp(-1.2, 1.2);

ScrollTrigger.create({
  onUpdate: (self) => {
    let scale = clamp(Math.abs(self.getVelocity()));
    proxy.scale = scale;
    //my gsap function
  }
});

gsap.set(".list .item .image", {transformOrigin: "center center", force3D: true});

The example site:
https://bbdo.de/work 
Thank you!

  • Like 1
Link to comment
Share on other sites

  • Solution

 

Hello @Quang Anh - welcome to the GSAP forum.
 

1 hour ago, Quang Anh said:

[...] the animated effect is very hard to understand to do.

 

Yup - the effect on that website likely makes use of WebGL - and that is not going to be trivial at all.

There is an article over on codrops explaining how to do such a wavy scroll effect - although it is not 100% exactly the same and contains some logic beyond that - but maybe it can serve as a starting point. Good luck with the project and happy tweening!

https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/

 

  • Like 2
Link to comment
Share on other sites

@akapowl hi, As far as I could see, there is no WebGl at play, I have not dug too deep, but as far as I came, it very much looks like its all done with GASP and v2, if I'm not mistaken. 3D transforms that mostly happen at speed seem do di the trick, but believe me, I felt very sur too, that there was more going on...
But you might still prove me wrong.

Anyhow, there is some 3D math at work that takes some understanding, but often isn't really that complex, once you figured out how to do it.

 

I'd guess, that they - distance from the middle of the page would be the factor multiplied with scroll speed that in turn influences the 3D-Transform z-distance and the angle towards that center line. at least that would be my first try.

And I would start without factoring in the scroll-Speed at first.

With modern browsers one usually can at lead as a start go with the native scroll event, and just place the 3d position of the element with gasp.set(). That's how I would start....

Link to comment
Share on other sites

 

Well, you can check their js bundle yourself any time.

 

33 minutes ago, iDad5 said:

As far as I could see, there is no WebGl at play, I have not dug too deep, but as far as I came, it very much looks like its all done with GASP and v2, if I'm not mistaken.


They are using GSAP 3.6.1 to be exact - and there is a looooooot of this.gl  stuff in there. Here is just a very little excerpt that should make it clearer:
 

(this.gl=t.getContext("webgl2",d)),this.isWebgl2=!!this.gl,this.gl||(this.gl=t.getContext("webgl",d)

 

Of course, maybe they aren't even using it for this specific effect - but I'm pretty sure they are. I don't think you can even get that curvy bending on images with 3D-transforms alone - I mean, sure, you can overall get a reletively similar 3D effect like that, but I don't think you can get the edges of the images to bend like that without some sort of WebGL - but of course you can prove me wrong, too, if you want ;) 

 

Link to comment
Share on other sites

@akapowl Thank you for pointing that out. And I'm sure you are right, and as I said I was under the impression that there was bending going on, but dismissed it as a trick of the mind, as I vas looking on a small display only. Sorry for doubting you, didn't mean to.
The wild guess with the old version was likely due to the fact that I realized the use of the CSS plugin wich I always (for which ever dumb reason associate with v2 - my very 'sloppy' bad)

 

 

 

Link to comment
Share on other sites

Hi, there.
the problem (despite my epic fail in my first comment) kept me thinking, and I had to give it a try to come close without WebGL. 
It took me a while to get my head around and the demo I created is still very rough around not only the edges. 
Basically what I tried to do was moving (scrolling) elements trough the viewport and lifting them on a sine wave with the highpoint at the center. Also rotating each element at the correct grade according to its' position on the wave. 
My rusty math was a bit challenged, but the real challenge for me was keeping the perspektive right - 3D CSS is just something, I'm not proficient.
It got trickier as I wanted to factor scroll speed in, but as proof of concept it finally worked for me as prof of concept.
It's a long way from smooth and it of course can not hold a candle to Quang Anh's BBDO link, but as I made it, I thought I'd share it.

See the Pen NWYwmBW by mdrei (@mdrei) on CodePen

 

[I did it my usual TypeScript construction without too much thought about the code structure and commenting - for me it was an interesting exercise and I'm happy with what I learned. In case someone should be interested  in an explanation, I'll happily try to explain.]

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Hi. Thank you @iDad5. Your codepen is really helping me a lot last time, I was able to figure out a way to make it smoother by adding some CSS transitions. Now I just want to ask can you do it the same but in sideway horizontal, and also change from scrolling to draging with mouse? I want to apply to slider image. I figure I can use Observer type "touch and pointer", change a velocity and moving from Y to X axis but it still needs more modifies.

Link to comment
Share on other sites

Hi there - glad to hear that the demo was useful for you. Yes this is likely possible with a lot of custom logic and hard work, but it's certainly out of the scope of these forums.

Obviously @iDad5 is welcome to make a demo if he'd like to - but I'm just stepping in to set expectations and take the pressure off him a little.

Link to comment
Share on other sites

On 8/18/2022 at 8:04 PM, Quang Anh said:

Hi. Thank you @iDad5. Your codepen is really helping me a lot last time, I was able to figure out a way to make it smoother by adding some CSS transitions. Now I just want to ask can you do it the same but in sideway horizontal, and also change from scrolling to draging with mouse? I want to apply to slider image. I figure I can use Observer type "touch and pointer", change a velocity and moving from Y to X axis but it still needs more modifies.

@Quang Anh Sorry, I've been rather busy the last weeks, and still am, so I cannot offer you help soon. I'm also not sure, if the effect you want to achieve really needs so much sophistication. A lot of times I find that a good 'fake' works just as well...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...