Jump to content
Hecsa

SVG Pieces to form image

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.