Jump to content
GreenSock

KevinJ

Particle elements form shape.

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

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

Link to comment
Share on other sites

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

 

:)

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

KJ

Link to comment
Share on other sites

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.

  • Like 2
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.
×