Disintegratejs by scroll

[Dennyno]

Hi guys, Im in love with a library @ZachSaucier did a while ago: disintegrate js. https://zachsaucier.github.io/Disintegrate/disintegrate-trigger.html

It has its own trigger itself, but Im trying to achieve it using scrolltrigger, to disintegrate the text.

Can you point the on the right direction?

Tried this, which has the code for images 

See the Pen xxpXpWe by DedaloD (@DedaloD) on CodePen

 ,  which is an svg fork of this one https://codepen.io/dev_loop/details/mdVWRMv- and which I dont need and requires many extra libraries and works only with img.

Cheers  and thanks allll

See the Pen MWrvXqa by DedaloD (@DedaloD) on CodePen

[OSUblake]

36 minutes ago, Dennyno said:

 ,  which is an svg fork of this one https://codepen.io/dev_loop/details/mdVWRMv- and which I dont need and requires many extra libraries and works only with img.

 

Just go off that demo. It doesn't work with just images. It's using the html2canvas library, which is what disintegrate uses. You don't need the imagesLoaded library either.

 

[Dennyno]

Hey Blake!
Thanks for the hint.

I tried removing imgsloaded and it breaks the script, and being canvas2html using, as it says "canvas", it no time, the log error is heavy.
Also removing the position fixed, the layout / image is totally messy, losing also the alpha channel and showing a white bg.

That's why I was looking for Zach's disintegratejs lib, which works with a whole selector...

Did you ever see that?

Thanks.

PS did you see on my demo the liquid buttons? (Finally!) 🧡
Next days gonna test the newer Gsap features I've seen during a @Cassie  stream

[OSUblake]

Zach's disintegrate won't really work with ScrollTrigger that well because it doesn't use GSAP to animate the particles.

 

24 minutes ago, Dennyno said:

I tried removing imgsloaded and it breaks the script

 

I have no idea why they are using imagesloaded or even html2canvas if they are just "disintegrating" an image. It's completely unnecessary.

 

But if you're trying to do that on something other than an image, then of course you'd need html2canvas. Here it is without imagesLoaded.

 

See the Pen bGaYVGz by GreenSock (@GreenSock) on CodePen

 

Zach's disintegrate is using the exact library to convert stuff to an image, so it should be possible to modify that demo to exactly what you want, I just don't have time to look into it right now. All html2canvas does is basically create a screenshot.

 

19 minutes ago, Dennyno said:

PS did you see on my demo the liquid buttons? (Finally!) 🧡

 

Yep, looks good!

 

[Dennyno]

On 4/2/2022 at 12:13 AM, OSUblake said:

Zach's disintegrate won't really work with ScrollTrigger that well because it doesn't use GSAP to animate the particles.

 

 

I have no idea why they are using imagesloaded or even html2canvas if they are just "disintegrating" an image. It's completely unnecessary.

 

But if you're trying to do that on something other than an image, then of course you'd need html2canvas. Here it is without imagesLoaded.

 

 

 

 

Zach's disintegrate is using the exact library to convert stuff to an image, so it should be possible to modify that demo to exactly what you want, I just don't have time to look into it right now. All html2canvas does is basically create a screenshot.

 

 

Yep, looks good!

 

Hi Blake. it seems that on mobile it crashes.
Also this page on Safari (iPhone 12) is crashing, having many errors (from the Codepen iframe faulty).

This is was I have been talkin' about...

Is just me?

PS thanks in advance for your time

[OSUblake]

It's not uncommon to see pages crash on mobile when there's a lot of complex Codepen demos running in them. Sometimes mobile just can't handle the type of stuff that runs fine on desktops.