Jump to content
GreenSock

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

SVG Pieces to form image

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

Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different.
I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript.
Thanks in advance!

 

 

See the Pen WoZQdV by Hecsa (@Hecsa) on CodePen

Share this post


Link to post
Share on other sites

Hello ,

 

You nearly got it. See the amended bellow:

TweenMax.staggerFrom(
    "polygon",
    2,
    {
        y: function(){
     return -620*Math.random()
    },
        x: function() {
      return 420*Math.random()
    },
        scale:0.5,
        opacity:0,
        delay:0.5,
        ease:Elastic.easeOut,
        force3D:true
    },
    0.01
);

Do have in mind that SVG is not the best option when you start moving a ton of elements in one go. You might see this pen hang right at the start. Consider using canvas for this or WebGL... Even DOM elements will give you a better performance than SVG in this case. Mainly because SVG is not currently offloaded to the GPU.

  • Like 4

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×