Jump to content
GreenSock

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

Animating tens of thousands of tweens

Recommended Posts

Hi All.. I am new to GSAP and investigating whether GSAP is the right tool/platform for a PoC I am building (vs. using Anime.js, Pixi.js, D3.js, other).

 

Here is the use case:
 
  • Initialize a rectangular canvas with a variable but large number of tweens (i.e. 30,000).
  • All of the tweens begin on the left edge of the canvas and are distributed vertically from top to bottom, evenly.
  • GSAP will animate the tweens along a fixed path from the left edge of the canvas to the right edge.  The path contains multiple fixed segments (i.e. 9 segments) that each of the tweens will follow.
  • Each of the tweens will have different durations for each of those segments before finishing at the right edge of the canvas.
  • The tweens can certainly be very small and the canvas can grow tall enough to accommodate all of the 30K tweens (top to bottom)
  • You can assuming the data for each tween is available (can be all hardcoded for now but will eventually be retrieved via Web Service API)
 
I created the following codepen () which shows the concept in action with just 10 tweens.  
 
Any support from this group would be appreciated! 

See the Pen apopOm by angecles (@angecles) on CodePen

Link to comment
Share on other sites

HI angecles  :)

 

Welcome to the GreenSock forums.

 

Blake is our resident expert for that type of question. Here are a couple of really cool examples he's made:

 

Snowflake particles

See the Pen BjNZYP by osublake (@osublake) on CodePen

 

Awesome Face Benchmark 

See the Pen vNwRdO by osublake (@osublake) on CodePen

 

He'll probably see this question and have some more thoughts for you.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hi angencies,

 

Welcome to the GreenSock forums. First, thanks for providing the demo. It shows you have a good level of understanding with GSAP and it helps us see what you want to do.

 

The demos Craig posted are great examples from Blake, and I suspect he may share some more wisdom here.

 

The short answer to your questions is that your best option for what you want to achieve is combining GSAP with Pixi (as shown in demos above).

 

If you really really need to push the limits, GSAP and Three.js perform amazing as well:

 

https://codepen.io/zadvorsky/pen/BKJQep

https://codepen.io/zadvorsky/pen/jqzMRj

 

In your description you mentioned that you want to "initialize a rectangular canvas", just keep in mind that around here the term canvas is usually meant to refer to the HTML5 <canvas> element which is basically an empty image that you draw on using various commands for drawing shapes and lines. 

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

 

Canvas performance is quite fast at rendering updates and benefits a lot from hardware acceleration and WebGL https://en.wikipedia.org/wiki/WebGL

 

Both Pixi.js and Three.js are libraries that make the "drawing things to canvas" part relatively easy and exceptionally fast. Using GSAP you can modify the properties of things you create on canvas via these libraries to make them animate.

 

Your example however used DOM elements (like <divs>) which can be moved around by animating certain CSS properties via GSAP. Animating css transforms with GSAP (scale, translateX, matrix3d, etc) is quite fast but browsers just can not keep up with manipulating CSS properties of 10s of thousands of objects. Behind the scenes GSAP is extremely fast at calculating the property values that need to be changed for 10s of thousands of objects (as shown in the demos above) BUT the browsers really stink at rendering (drawing) those updates to the screen. 

 

Again, for 10s of thousands of objects you will need to use <canvas> and since your project is 2D, pixi seems like the clear winner.

 

The great thing about GSAP is that you can animate SVG, DOM and canvas elements using the exact same JavaScript syntax as illustrated here:

https://codepen.io/GreenSock/pen/PZgOqe?editors=0010

 

I think once you wrap your head around some basic Pixi concepts you will find that what you want to achieve isn't too far out of reach.

  • Like 4
Link to comment
Share on other sites

Great info Carl. :)

 

I just thought I'd note for anyone reading this thread and interested in Pixi that Petr Tichy has some tutorials about getting started with it.

 

https://ihatetomatoes.net/getting-started-with-pixi-js/

https://ihatetomatoes.net/how-to-work-with-images-and-pixi-js/

 

and one about canvas with other libraries

 

https://ihatetomatoes.net/guide-to-html5-canvas-javascript-libraries/

 

:)

  • Like 3
Link to comment
Share on other sites

I'd have to agree with the Pixi.js recommendation. While Three.js is just as fast as Pixi.js, it's designed more for doing 3d, so it's going to be a little harder to use for what you're trying to do.

 

About some of the other libraries you mentioned, you're obviously going to get a biased recommendation for GSAP on this forum, but it's all true. You're not going to find another library that can do timelines like GSAP. And it's highly optimized. Will you notice the difference with a couple tweens running? Probably not. Throw a couple hundred or thousand tweens into the mix, and you'll definitely start to see the difference those little optimizations make.

 

Here's a pretty cool site where you can compare different ways to create the same animation. I think the GSAP version speaks for itself. 

http://sparkbox.github.io/bouncy-ball/#greensock

 

 

EDIT... I just noticed the React version they added   :shock:

.

  • Like 4
Link to comment
Share on other sites

Thank you PointC, Carl, and Blake for all of the valuable info, links and timely response!

 

Sounds like Pixi.js and GSAP is the way to go... one-two punch :)  I should be able to use Pixi.js to get the items on to the canvas and then use GSAP's power/simplicity for the animation.

 

One thing I know I also need to investigate/play with is if I can use a single GSAP Timeline (Max/Lite) to animate all of the tweens or if I need to use one Timeline per tween (as done in the codepen). 

 

Thanks, again!

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