Jump to content
Search Community

Advice on creating a more realistic animation

Creativist-Lab test
Moderator Tag

Recommended Posts

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.



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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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



  • Like 1
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...