Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

wave banner animation background

Recommended Posts

I was wondering if it is possible to build this three.js completely in Greensock? And more importantly how should I write that in Greensock?

See the Pen WvGJVV?editors=1010 by digitalhour (@digitalhour) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @chiho

Is your goal to use only GSAP and <div> elements or something (no THREE.js)? You're asking someone to rebuild that whole animation for you? 

  • Like 1
Link to comment
Share on other sites

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.