Jump to content
Search Community

wave banner animation background

chiho 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

You could use divs, canvas, SVG -- pretty much whatever you want. GSAP will animate the values perfectly. The question is which of those will perform the best? I also had the same question as @GreenSock: Are you asking someone to make that for you?


I looked at some of the other questions you've posted about responsive animations, CSS etc. and my recommendation would be to go through the learning page https://greensock.com/learning to make sure you understand the basics of GSAP before attempting anything too complicated. Once you've done that you can start reverse engineering demos like the one you've posted. You'll learn a lot by doing that. Try rebuilding them from the ground up with GSAP. When you have GSAP related questions, we're always happy to help.


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Look at your code, line 9:


for (i=0; i<total; i++){ 


Do you understand what this is doing? All you need to do is nest another loop, similar to this for each row that you want to create.


As PointC has mentioned before, this is a more general JavaScript question that you are asking, we do try and stay as focused in GSAP as possible here or we won't be able to help as many people as we could otherwise.

  • Like 3
Link to comment
Share on other sites

Yup, like Dipscom mentioned, you already have 1 row, so building another would just require using a loop.


My suggestion would be to create a buildRow() function that adds a new row of balls to the dom. Call that function a bunch of times for more rows.


I would also create a new timeline to animate each row. I did a rough implementation of this setup in the demo below. Each row uses the same animation parameters. you will most likely have to do considerable calculations to make each row animate differently if you want to replicate the effect in the Three.js demo you have been referencing in multiple threads. Unfortunately that isn't the type of thing I have the time, or perhaps even the ability, to do for you.


See the Pen LrgzVj?editors=0010 by GreenSock (@GreenSock) on CodePen


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