Jump to content
GreenSock

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

Duplicating svgs to create animated environment

Recommended Posts

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!

Link to comment
Share on other sites

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.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

:)

 

  • Like 3
  • Thanks 1
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.
×