Jump to content
Search Community

Wavy Images either with customEase or not.

Yusuke2223 test
Moderator Tag

Recommended Posts

Welcome to the forums, @Yusuke2223

 

I'm not quite sure what you mean by "wavy images" - do you mean like they were floating on top of water and a wave comes in from left to right, so the far left one goes up, then the next one, etc. and then settle back down in an elasticy kinda way? Or do you mean literally like a sine wave? Or something else? An example URL would be helpful.

 

By the way, all the image links are broken in your CodePen. You can just use colored <div> elements if you prefer. 

Link to comment
Share on other sites

@GreenSock thanks for responding..not literally like wave images..As you see in the images it makes like a wavy effect with each boxes. Take this iamge as example Free Sound Effects for Video Editing — Top Sites Ranked

it goes small to big then small to big and small to big as it keep going and then after the duration is done...Something like this.

I added an image also so it can be see.

Link to comment
Share on other sites

I see a static image, but I have no idea how you want things to move exactly, sorry. 

 

I'd recommend animating the scaleY rather than the height because that'll perform much better since the browser won't need to do any reflow. 

 

You could use a CustomEase or keyframes or MotionPathPlugin. 

Link to comment
Share on other sites

 

Hello @Yusuke2223

 

For tweens to "stagger in waves", it can be nice to use stagger as an object, set repeat to -1 (so it repeats infinitely) and yoyo true (so it also tweens there and back) in there, and then play with the duration for the tween and value for the stagger until you get it working to your liking.

 

Here is an example - maybe with a bit of tweaking the values this can help get you where you want with this.

 

See the Pen vYdwarp by akapowl (@akapowl) on CodePen

 

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