Duplicating svgs to create animated environment

[Yaya]

Hi there,

As a GSAP newbie, I am still navigating the possibilities of svg while managing performance. I ran across some examples of how several paths are animated to "fly" the viewer through a 3d space. There are tons of examples online (and in this forum)  but I can't nail down how it's done; believe me, I've spend several hours searching. After going down several rabbit holes, from using my Adobe CC Animate/After Effects, to particles.js, to webgl, and even Blender (3d and not related to my goal here), I'm finally poking my head above ground and asking the gsap community. You can slap me with a wet noodle for taking so long to ask.

I made this screencast to be very specific about what I'm trying to do. In the first 1.5 seconds, you see triangles and polygons floating. If I create... say... 4 different polygons, is there a way to use gsap to duplicate those and animate them collectively for this fly-through effect? Are there codepens out there that use a similar technique?

http://screencast-o-matic.com/watch/cFXFbCrQ3h

Thanks in advance for your time and expertise to jump-start me in the right direction!

[PointC]

For animations like that you'll most likely want to use canvas or WebGL. Seems like three.js would be a good possibility for your needs.

https://threejs.org/

 

This is not to say it can't be done by cloning DOM or SVG elements. It's just that it probably won't perform as you'd like. In answer to your question, no there isn't any out-of-the-box duplication feature of GSAP. You'd create the elements in a loop or by cloning an original. After they're created, GSAP will have no problem animating them.

 

Hopefully that helps a bit. Happy tweening.

 

[Yaya]

Thank you for your advice, Craig! I can put svg's with gsap animation on top of canvas or WebGL, correct? Checking out three.js now.

[PointC]

@OSUblake has written a ton about canvas. If you search the forum, you'll find many helpful threads. Here's one about migrating from SVG to canvas.

Happy tweening.