Multiple Objects Animation create and Duplicate

[Ken Flores]

I am trying to recreate the effects on this page with no luck. Anyone got good starting points or know of a demo? 

Ive tried with all the plugins with no luck. Maybe GSAP is not for this? 

https://zhenyary.com/404

[Windpixel]

1 hour ago, Radiant Church said:

I am trying to recreate the effects on this page with no luck. Anyone got good starting points or know of a demo? 

Ive tried with all the plugins with no luck. Maybe GSAP is not for this? 

https://zhenyary.com/404

Might be a job for matter.js, which is a robust 2d physics library.

https://brm.io/matter-js/

 

Here is a collection of Matter JS Code Demos to have a look through.

https://codepen.io/collection/DPRzMX?cursor=eyJwYWdlIjo1fQ==

- Lance

[Rodrigo]

Yep Lance is 100% right! GSAP is not a physics/collision-detection tool. That is a whole different beast to tame so I'd echo Lance's approach of trying MatterJS for this.

 

An alternative could be to use this demo by @OSUblake one of our superstars and PIXI/Canvas crazy genius:

See the Pen vNwRdO by osublake (@osublake) on CodePen

 

That of course would require some update since it uses PIXI 3.x (currently in version 7 and version 8 is already in RC status) and GSAP 1.18 (currently 3.12):

https://gsap.com/resources/3-migration

 

Happy Tweening!

[Ken Flores]

Thank you guys! Super clarifying!