Jump to content
Search Community

Creating a boat wake effect

Les Vikings test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there!


I'm trying to think of ways to create an effect that would mimic a boat wake. I've searched for similar effects on Codepen but I wasn't too happy with what I found.


I  guess what I'm looking for would be similar to a water effect, but with a "speed" motion. So far, I've gathered different ideas (that would not all be used at the same time, it has to be subbtle and as lightweight as possible):

- animate water curves around the boat, for instance with Morph SVG like the cape here: 

- use a filter over parts of the image like this: 

See the Pen doBLxx by thebabydino (@thebabydino) on CodePen

- use particles to imitate water drips


These are not perfect ideas and I'm mainly looking for advice on them or maybe pointers to a technique that would suit my needs.


I've attached the image I'm working with.


Thanks for your ideas!


See the Pen WQjRXE by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi tilvalhall,


I would say, ultimately, it will boil down to what style you are after. Is it cartoon? Realistic? Is this boat running in a fixed specific path?


There would be several ways to achieve it. The more realistic, the harder (displacement maps, colour channels) but if the end result is a cartoon loop, you provably will be ok with tweeninig (scale, position) of simple elements.


This is a pen I made a while ago - there's no wake around the boat but there is a layer of waves, the same principle would apply.


See the Pen adjGNp by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

Thanks for you answer @Dipscom!


The boat is currently fixed, and seeing that there are already a lot of moving elements in the page, it would stay fixed and I would just animate it's surroundings.


Displacement maps effects look quite nice indeed, but I'm not sure that I'm up to the task technically :/ Is it possible to apply them only on part of an image (on the boat waves for instance)?


The effect I'm looking for should be cartoonish, but not too much :P I guess if it stays in the style of the image, I'd be happy with it. And what about MorphSVG? Wouldn't it be easier than displacement maps?

Link to comment
Share on other sites

Displacement filters are very expensive CPU-wise, more often than not, you don't want them in. You can create the filter and mask/clip it, yes.


Morphing SVGs is not cheap either when it comes to CPU.


I can see the image has a texture to it - watercolour-ish - and I'd imagine you would want to preserve that.


In all honesty, the cheapest technique I can think of (CPU wise) is to create a series of sprites and use SteppedEase to flick thru them. You can use a series of PNGs or even SVGs, if you feel you can recreate the image with vectors. You should be fine to animate that without jank. It also shouldn't be too heavy in KB as you can always optimise the image and cache it.


To answer your question - yes, MorphSVG would be easier than dispacement - in a way. But, I'd say a sprite sheet is what you really want here.

  • Like 1
Link to comment
Share on other sites

Thanks for the pointers! Sprites would be ideal indeed, except I don't have control over the graphics part, they are given to me as is.


I've made attempts with displacement maps and turbulence, but still not happy with the result. The displacement map using a ripple map produces ripples that are shown onto the boat at the beginning of the tween which is not pretty and it ends in a stutter. The turbulence animation is great at the beginning but goes way to fast in the middle of the tween so that it doesn't look like credible water...


Actually, an effect like this one would be perfect : http://srufaculty.sru.edu/david.dailey/svg/waves.html (with these values : frequency 12, scale 32, rotate 246). May try to replicate it.

Link to comment
Share on other sites

You're right, a Pen will be easier to work with. I've setup one with the boat and the pen you gave which is perfect for what I want (a simple wattery effect will do I think, it's more subtle and I'll also have to animate a pool surface).


Here is the Pen 

See the Pen rWxqyg by tilvalhall (@tilvalhall) on CodePen

. For whatever reason my clip-path doesn't show (it's supposed to be the right part of the wake).

Link to comment
Share on other sites

Here's why your clip-path is not working. Scroll all the way down to the bottom of your SVG.


See the Pen yVewXN by dipscom (@dipscom) on CodePen


It shows us two things:


1) How much easier it is with some live code ;)

2) It is working  B)


The issue is how it is all your shapes are being drawn initially and being imported into your document. The easiest way I know of is to set your document up in your vector drawing program with everything in place and at the size you want it to be. Then export the whole thing out. After that, you can pick the code apart and adding your filters and animation.


Or you can just hack it with what you have at the moment to make it work:


See the Pen LbGazO by dipscom (@dipscom) on CodePen


The hacking is in the css, by the way...


I'd advise going with option one.

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