Advice on creating a more realistic animation

[Creativist-Lab 18 Likes (Newbie)]

Hello all,

 

I'm looking for some advice/improvements/examples on my code.

What I would like to achieve is a more realistic looking movement of waves and shorebreak, and preferably I would like to have some randomness in it.

 

You can see in the codepen what I currently have.

 

Thanks!

See the Pen ZERYEgJ by JeroenVn (@JeroenVn) on CodePen

[mvaneijgen 1,302 Likes (Superhero)]

Have you ever worked with the MorphSVG plugin? I would make some different wave shapes and randomly morph the different layers to different shapes. Random example I've found (not my pen)

 

See the Pen NWRbeqY?editors=1010 by notepadwebdev (@notepadwebdev) on CodePen

 

 

I also see a lot of 'random' functions in your code, did you know GSAP provides a lot of amazing utils functions that are build for GSAP and are really robust! https://greensock.com/docs/v3/GSAP/gsap.utils

[Creativist-Lab 18 Likes (Newbie)]

Hello @mvaneijgen and thanks for your reply. I thought about the use of MorphSvg but I'm not sure in this case if this is what I'm after. In general I like the basic setup that I have I would just like to have a bit more control over how the timings and amplitudes are currently.

 

For example the "whitewater" should ideally appear underneath the second wave and accelerate a bit compared to the second wave when the highest amplitude of the second wave/ripple ended. I'm not sure if my explanation is clear.

 

And thanks for the utils link, I will study that a bit.

[Cassie 4,868 Likes (Superhero)]

Control and timing is a separate beast to tackle imo. That all comes down to position parameters and easing really!

[Creativist-Lab 18 Likes (Newbie)]

@Cassiethanks .... I might go for a different approach all together but...... Is there a way to have more control over the timings and positioning even when you use random functions? So for example adjusting the ease or duration of the tween depending on the Math.random outcome? I'm still very much a beginner with coding so sorry if I ask very obvious questions.

[mvaneijgen 1,302 Likes (Superhero)]

I had taken a look at your code some more, and saw that you have a for loop that runs 100 times, in there you create tweens that all have the position parameter 0, which means every tween starts at the beginning of the timeline and thus only your last loop gets played. 

 

I've updated the pen to use the position parameter '<' which means play at the same time as the previous tween and removed this from the first tween. Now it should have created 100 different tweens (time the number of waves)  

 

See the Pen ZERYMvr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Personally I would let GSAP handle the repeats and random-ness. Below and example without the loop. The animation is not what you want, but it shows you how you could have GSAP handle your repeats and random-ness. I would look in to utils functions, I think the following  functions could really help you have better control of your random-ness 

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/random() get random values each time the animation runs

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() not random, but get know values ever x amount of times 

https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() you could use this to map your random values to another range 

 

See the Pen oNygjQP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Here are some awesome videos to help you get started

 

 

[Creativist-Lab 18 Likes (Newbie)]

@mvaneijgenThanks a lot again for taking the time and giving these examples. I will dive into this some more and see what I can come up with