GSAP - Wavify

[Trang 1 Likes (Newbie)]

Hi,

 

Dumb question ...

 

I've been following the SVG Wave Animation forum (https://greensock.com/forums/topic/16172-svg-wave-animation/).

 

I'm trying to create something like the first post (by peacepostman - thanks, man!) in this forum but I would like the SVG/wave animation:

 

1. to be vertical

2. to cover almost the full width of browser

3. to animate on both sides of the SVG

 

(See screenshot-2.jpg - attached)

 

I've managed to get the SVG to display vertically using CSS (transform: rotate(-90deg);) and the left edge now animates fine but:

 

1. the SVG now sits towards center of screen

2. the SVG doesn't stretch across full width of browser screen

2. I have no idea how to get the right side of SVG to animate (wave) along with left side.

 

See Codepen: 

(See screenshot-1.jpg - attached)

 

I've messed around with various CSS settings but can't get a solution. Not even sure if this is possible.

 

Wondering if someone can point me in right direction.

 

Many thanks.

 

 

See the Pen wvyaare by Ben10 (@Ben10) on CodePen

[OSUblake 18,474 Likes (Superhero)]

Hi Trang, 

 

It's certainly to possible to modify that code to what you want, but it's not something we can really do for you.  Please see the forum guidelines.

 

Anyone else is more than welcome to chime in with a better solution, but you could just animate 2 waves and then flip the second one around so it faces the opposite direction.

 

[Trang 1 Likes (Newbie)]

Hi @OSUblake,

 

Thanks for getting back to me.

 

Sorry if I wasn't clear in my explanation ... I didn't actually want someone to do this for me. Just hoping to get a tip, some advice on which way to go with this.

 

I did think of animating 2 waves and flipping one but I thought there might be a more elegant solution. I always feel my solutions are very clumsy.

 

But, no worries. I'll press on.

 

Many thanks.

[OSUblake 18,474 Likes (Superhero)]

5 hours ago, Trang said:

I did think of animating 2 waves and flipping one but I thought there might be a more elegant solution. I always feel my solutions are very clumsy.

 

That's the only thing I can think of that would work without actually modify the actual plugin, so it's not too clumsy of an idea.

[Trang 1 Likes (Newbie)]

@OSUblake

OK, thanks.