Water on landing page + moving up and down on scroll

[MojeMana]

Hello amazing code guys, i am trying to do this animation when i have this water moving (like on this page https://waterminder.com), but i would also like to move it up and fill the box on scroll. I tried some draft but nothing work for me, can you help? 

1. for some reason i cant make border radius.
2. It moves up and down for about 400px
3. add a scroll trigger to UP and Down movement
 

See the Pen OJoVEdR by drinkmana (@drinkmana) on CodePen

[mvaneijgen]

Quote

1. for some reason i cant make border radius.

Can't seem to fix it either 

 

Quote

2. It moves up and down for about 400px 

3. add a scroll trigger to UP and Down movement

Do you want the wave animation separate from the ScrollTrigger or do you want to it to wave based on the users scroll?

 

Right now I have an example where the wave animation is doing its thing and a separate ScrollTrigger with an animation that moves the canvas up or down on scroll. If you then make the wave just do their thing and create them as large as the box you want to fill, you can use this animation. 

 

See the Pen dyqoQGP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want the waves to be controlled by the scroll I would use the same logic, but instead of moving the canvas up and down, create a timeline with the animation you want (right now you all have separate GSAP tweens). So I would create a timeline, remove all the repeating tweens and just make the animation behave like you want it to work in the end. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.
 

[Rodrigo]

Hi,

 

24 minutes ago, mvaneijgen said:

Quote

1. for some reason i cant make border radius.

Can't seem to fix it either 

Maybe move the canvas container and not the canvas object?

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".background",
    pin: ".background", // pin the trigger element while active
    start: "top top", // when the top of the trigger hits the top of the viewport
    // end: "+=500", // end after scrolling 500px beyond the start
    scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
    markers: true,
  }
});

tl.to('.box', {
  yPercent: -100,
  ease: "none"
});

Another option is to draw a rounded rectangle specifying the corner radius:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect

 

Hopefully this helps.

Happy Tweening!

[MojeMana]

On 2/17/2023 at 11:20 AM, mvaneijgen said:

Can't seem to fix it either 

 

Do you want the wave animation separate from the ScrollTrigger or do you want to it to wave based on the users scroll?

 

Right now I have an example where the wave animation is doing its thing and a separate ScrollTrigger with an animation that moves the canvas up or down on scroll. If you then make the wave just do their thing and create them as large as the box you want to fill, you can use this animation. 

 

 

 

 

If you want the waves to be controlled by the scroll I would use the same logic, but instead of moving the canvas up and down, create a timeline with the animation you want (right now you all have separate GSAP tweens). So I would create a timeline, remove all the repeating tweens and just make the animation behave like you want it to work in the end. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.
 

Even this helped a lot, thank you so much!