[Water on landing page + moving up and down on scroll]

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! 

[Water on landing page + moving up and down on scroll]

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

[Scroll trigger Fill in text animation]

4 hours ago, mvaneijgen said:

I would copy the text, make that copy green and place it on top of the other text. Then create a clipPath tween from the bottom to the top. Here is a handy clipPath tool https://bennettfeely.com/clippy/ (make sure the string of the clipPath code is the same within CSS and JS. To be safe place an % sign after each number)

 

 

 

Wow and thats it! thank you so much. 🤩

[Scroll trigger Fill in text animation]

Hello guys, would you know hot to create this animation? I had an idea to scroll trigger position of backround mask and transparent Text. But dont know how to put it on scroll. If you know, you will help a lot!
 

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

[GSAP v3.10.5 (and ScrollTrigger v3.10.5)]

Hi everyone!

Someone had written some animations and used Codepen's CDN - apparently - the core GSAP link - i.e.  

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script> 

I suspect they did it because the latest version was working better

problem is ofc (and we do have a commercial license) latest version is 3.10.4 and things for some reason or another do not run smoothly

Is there a way to get intermediate versions? I believe the solution lies somewhere - most likely in 3.10.5

Thanks in advance!