New Guy - Looking to learn to make an image piece together

[thebookofjedediah]

I realize this may be big for someone who is brand new to GreenSock (and most animation), but I am wanting to learn how to take an image (from what I'm reading svg is the way this works) and have broken pieces of it fly across the screen and create the full image. 

If anyone has done something similar it would be greatly appreciated! I am new to SVG as well so if there are good resources to understand those files and a place to get a practice one.. 

Basically any advice and first steps to reach the end goal are greatly appreciated! 

[ZachSaucier]

Hey thebookofjedediah and welcome to the GreenSock forums!

 

This is a complex thing to do. To do it generically, <canvas> might be a better approach. I did pretty much the same thing in this project, though it is likely tough to understand:

 

See the Pen raltF by ZachSaucier (@ZachSaucier) on CodePen.

 

Maybe you can modify it to suite your needs?

[thebookofjedediah]

I might be able to do that honestly, it's definitely not exactly had in mind but good to tinker with! Thanks so much! 

Would canvassing be ideal just in a bunch of small PNGs to move across and align to form a photo or are SVG's doable? I haven't canvased much but I am familiar

[ZachSaucier]

14 minutes ago, thebookofjedediah said:

are SVG's doable?

Doable? Yes. As performant? Probably not.

 

15 minutes ago, thebookofjedediah said:

Would canvassing be ideal just in a bunch of small PNGs to move across and align to form a photo

Yes, canvas is great for this sort of thing.