Jump to content
Search Community

GSAP - Wavify

Trang test
Moderator Tag

Recommended Posts

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.

 

 

screenshot-1.jpg

screenshot-2.jpg

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

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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