Pieces of Pixels falling together forming a final image.

[Sajidul Islam]

Hi,

 

I'm just wondering if it's possible to make something like this with GSAP and Help with any GSAP addon. When the users scrolls, the small pixels will independently fall into place forming an complete image.

I tried to find some demo on codepen and no luck, Any reference or hint would be must appreciated.

 

 

Thanks

[mvaneijgen]

Hi @Sajidul Islam, sure this is possible! GSAP doesn't draw anything, so you would need to create your shape a design program, creating a SVG would be perfect for this. Then give the shapes you want to animate a class and then gsap.from('.myShapes', {y: -200, stagger: 0.2 }), could be the basic animation you will need, hooking that up to ScrollTrigger will be trivial. 

 

If you need any help setting this up, please create the shape you want to animate create and add it to a minimal demo and someone here will surely point you in the right direction. 

 

Hope it helps and happy tweening! 

[Sajidul Islam]

Hi @mvaneijgen,

 

Thanks for your response. I will give it a try and post here if I face any issue. 

Could you please help me with another thing? As a beginner, I'm not so sure what type of plugin's I need to achieve the same animation like the reference video. Could could you please help to do quick check and let me know? It will help me a lot.

https://www.veed.io/view/4514a031-19ec-49ee-b1b6-8e74e7bac62f?panel=share

 

 

Many Thanks,

Sajidul 

[Rodrigo]

Hi,

 

There is an error in the video link.

 

My first attempt to this would be use SVG and the Attribute Plugin:
https://gsap.com/docs/v3/GSAP/CorePlugins/Attributes

 

Hopefully this helps.

Happy Tweening!

[Sajidul Islam]

Hi @Rodrigo

 

Please check the video reference here - https://www.veed.io/view/4514a031-19ec-49ee-b1b6-8e74e7bac62f?panel=share

[Rodrigo]

Yep, I would use SVG and the Attribute Plugin.

[mvaneijgen]

Yep indeed what @Rodrigo said. There isn't much you'll need. The Attribute Plugin is included in GSAP core (https://gsap.com/docs/v3/GSAP/CorePlugins/Attributes/), so you just need GSAP and ScrollTrigger to hook it up to scroll. The most important thing you'll need is a lot of elbow grease, because this seems like a complex animation, so a lot of time will go in to making it perfect. 

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Hope it helps, good luck and happy tweening!  

[Sajidul Islam]

Thanks a lot for the guidelines. I will give it a try.