Anime.js | JavaScript Animation Engine A fast, multipurpose and lightweight JavaScript animation library

have you tried @animejs.com? this is my go to library for making animation, and it has support for scroll driven animation as well

its homepage is a demo of the scrollytelling itself: animejs.com

not sure about react support though, but I think you should be able to integrate them

hey thanks man! you can check @puddingviz.bsky.social and @samwho.dev for some inspirations!

Thanks! Of course, feel free to share this!

thanks! and true, some sources I read are using normalized threshold, so for 4x4 they are using 0.2, 0.4, 0.6, 0.8 resulting in 5 shades.

but it makes big areas in my image pure black and dont look good

I guess in the end we might need to adjust the input brightness/threshold to get a good result

haha, sorry and thanks!

the first part:

bsky.app/profile/dama...

the 2nd part of my dithering visual article is finally out!

🔗 visualrambling.space/dithering-pa...

this one mainly explores the threshold map and how it generates those unique visual patterns

hope you enjoy this as much as I enjoyed making it!

made with #threejs & #animejs

just added this dithering pattern animation to my @codepen.io

codepen.io/damarberlari...

you can play with the group spacing and the input color manually

thank you!

thanks!

I write them from scratch, with threejs (for drawing the 3d objects) and animejs (to animate them)

I dont use any framework for now, but I might use (or maybe build) one if I’m sure I can do this consistently. Still a long way though

Dithering - Part 1 Understanding how dithering works, visually.

the first part is available here:

visualrambling.space/dithering-pa...

Almost finished the second part of my Dithering visual article!

this one will discuss threshold maps and how they form the dithering patterns

still need to do a bit more polishing, but should be able to finish it by next week. here's a small snippet for now!

made with #threejs + #animejs

Arrange - Rearrange

started this as just another usual exploration with threejs & animejs

but it turned out to fit yesterday’s #genuary, so consider this a participation for #genuary12

ahh thats why I got more traffic today, thanks for letting me know, and glad you like it!

Thank you @chezvoila.com for sharing, glad you like it!

thank you @aman.bh, I also love your works at diagramchasing.fun!

thank you for your kind words

The Dithering article is one of the three winners of The Pudding Cup this year!

@puddingviz.bsky.social has always been my source of inspiration when making visual articles, so I’m really happy about this!

Go check the other winners on their website! pudding.cool/pudding-cup/

hi Carin, thank you for your kind words,

and thanks for sharing, glad you and the others like it!

Experimenting with different types of threshold maps for ordered dithering.

this close-up shows how unique the patterns produced by each one are.

made with #threejs & #animejs

thank you! part 2 also took longer than expected :D but I’ll finish it for sure. please wait!

visualrambling.space Just a place to ramble visually

thanks! several people have asked me to enable RSS on my site, so I added it just now :)

visualrambling.space/rss.xml

Please let me know in case it doesn’t work

thanks for sharing!

thank you! will submit then

is visual story (but not data-driven) also eligible to enter?

i wanted to submit mine but not sure if this qualifies: visualrambling.space/dithering-pa...

hi, honestly I’m not that active here, so a bit hesitant to put my bluesky profile there. but I’m considering it now.. thanks for the suggestion!

hey, thanks for sharing! I’m not really active here at Bluesky but maybe I should, haha

finally published this visual article on dithering (part 1)!

I had so much fun and learned a lot while making this. not only about dithering, but also about @threejs.org shaders.

as usual, animated with @animejs.com

enjoy!

🔗 visualrambling.space/dithering-pa...

almost finished the first part of my next visual article on dithering, created with #threejs & #animejs

it took much longer than expected, so i decided to split it into 3 parts (otherwise i’ll never finish this 😅)

anyway, 1st part should be ready next week! here’s a snippet:

exploring #threejs shader material and simple lighting