<p>You could use an image or vector of a sine wave and move it to the right, with the second keyframe at exactly the distance between the zero crossing of each cycle, cropping the sides so it looks like the waves are travelling. Use the <code>loopOut()</code> function on the position channel to have it loop continuously. </p>

<p>Then for the nodes you could use shape or image layers. Apply an expression to their position channel like this</p>

<pre><code>var wavelength = 100; //the width of the sin wave in pixels
var magnitude = 120; //the height "" 
xPos = value[0];
yPos = value[1];
[xPos, Math.sin(time*freq + xPos/wavelength)*magnitude);
</code></pre>

<p>the first line could use the distance between the two keyframes of the sinewave like:</p>

<pre><code>var wavelength = thisComp.layer("sine wave layer name").transform.position.key(1).value[0]-thisComp.layer("sine wave layer name").transform.position.key(2).value[0];
</code></pre>

CC BY-SA 4.0
2018-07-01T19:52:48.553Z
Thanks. I ended up using a gif of a transverse wave and using some cuts to adjust it.
DarkRunner
CC BY-SA 4.0
2018-07-01T11:13:06.193Z
2018-07-01T11:13:06.193Z
stib
<p>I'm trying to create a transverse wave in Adobe after effects, much like: 
<div class="youtube-embed"><div>
                <iframe width="640px" height="395px" src="https://www.youtube.com/embed/-wKALLNGSWM?start=0"></iframe>
            </div></div></p>

<p>To start off, I've got a Water World animation going, but it's obviously not the type of look I'm going for. Any help on this matter would be appreciated. 
<a href="https://i.sstatic.net/zGQQ3.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/zGQQ3.png" alt="enter image description here"></a></p>

<after-effects><animation>
Transverse Waves in After Effects
DarkRunner
# Transverse Waves in After Effects

(Asked by: username_0 on 2018-06-30)

I'm trying to create a transverse wave in Adobe after effects, much like:

To start off, I've got a Water World animation going, but it's obviously not the type of look I'm going for. Any help on this matter would be appreciated.
[![enter image description here](https://i.sstatic.net/zGQQ3.png)](https://i.sstatic.net/zGQQ3.png)

**Tags:** after-effects, animation


---

## 1 answers

### Answer by username_1 on 2018-07-01. Score: 1 | Accepted answer

You could use an image or vector of a sine wave and move it to the right, with the second keyframe at exactly the distance between the zero crossing of each cycle, cropping the sides so it looks like the waves are travelling. Use the loopOut() function on the position channel to have it loop continuously. 
Then for the nodes you could use shape or image layers. Apply an expression to their position channel like this
var wavelength = 100; //the width of the sin wave in pixels
var magnitude = 120; //the height "" 
xPos = value[0];
yPos = value[1];
[xPos, Math.sin(time*freq + xPos/wavelength)*magnitude);

the first line could use the distance between the two keyframes of the sinewave like:
var wavelength = thisComp.layer("sine wave layer name").transform.position.key(1).value[0]-thisComp.layer("sine wave layer name").transform.position.key(2).value[0];

> **Comments:**
> **username_0**: Thanks. I ended up using a gif of a transverse wave and using some cuts to adjust it.  

---

