Particle elements form shape.

[KevinJ]

Hey Guys,

 

I've been tasked with creating an html5 ad for a client.

 

The company's logo has a shape element that is made of triangles (a total of 8, all the same size).

 

The concept for ad has the triangles scattered, rotated, resized, then eventually organizing themselves to form the shape element of the logo.

 

Any ideas on how I can create this?

 

I was thinking importing the logo as a svg, further dividing the triangles to get more elements. Is there a way scatter them randomly?

 

I came across this from the example page:

https://baconclubhouse.no/en

 

I like the feel the depth of field of the particles.

 

 

Regards,

KJ

[Jonathan]

Hello KevinJ, and Welcome to the GreenSock forum!

That McDonald's particle effect is done with WebGL canvas, and not DOM elements. I have a very fast computer and even with canvas which is best for these types of particle effects, i saw some lag do to the number of particles.

 

With SVG your looking at some serious jank (lost frames), since SVG are DOM elements and will have to move all those elements around. Just something to think about.

 

Something to look at:

 

See the Pen aApDq by bazooki (@bazooki) on CodePen

 

[Carl]

Check out how Dennis Gaebel explains his SVG Poly Lion: https://css-tricks.com/polylion/

 

Just try to keep the poly count low. Rendering a lot of SVG bits isn't easy for the browsers.

[KevinJ]

Hi Guys,

 

Thanks for the examples.

 

The image linked shows what I'm trying to accomplish.

 

 https://s9.postimg.org/ej9kiy31r/anim.jpg

 

KJ

[ohem]

Seems like GSAP's "cycle" property would be perfect for that.

[KevinJ]

So this is where I am so far.

 

See the Pen LkKmYp by kjames (@kjames) on CodePen

 

I need the elements to be scattered more then gradually move into position.

 

Can I add depth some smaller, larger?

 

Thanks for the help.

 

KJ

[Dipscom]

Something like this: 

See the Pen ZOdoON?editors=0010 by dipscom (@dipscom) on CodePen

by any chance?

[KevinJ]

Yes. Thank you. Where do add an ease to the triangles and have them fade in?

 

KJ

[Dipscom]

At the variables object, just like any other tween. The cycle property does make it a tad confusing to see what is what, I can appreciate it. I've updated the fork with an ease, you'll be able to spot it, right next to the transformOrigin bit.