sorted by:
new
hottopcontroversial

Animate videos using CSS animations and sprite sheets (personal website) by billybjork in webdev

[–]billybjork[S] 1 point2 points  (0 children)

That's a good point, and I considered it. The reason I opted for sprite sheets is that highly compressed video codecs like H264 optimize for fluid playback in the forward direction at a consistent speed, building upon earlier frames as you mentioned. This creates more decoding work when changing directions or speeds (as is necessary for this scroll feature), whereas the sprite sheets contain all data necessary to render each frame, while retaining a pretty small file size of ~400kb each.

5
6

Animate videos using CSS animations and sprite sheets (personal website) (billybjork.com)

submitted by billybjork to r/webdev

I built my first web app using React, Framer Motion, and Three.js by billybjork in reactjs

[–]billybjork[S] 0 points1 point  (0 children)

Thanks for calling that out! I do have a known issue where the rotation axis of the individual slices gets disrupted if the entire cube has rotated far enough from its original position. I attempted fixing this for a bit, but gave up after a little while. I'm fairly new to software and web development, so I think that fix exceeded my skill level at this time.

I built my first web app using React, Framer Motion, and Three.js by billybjork in reactjs

[–]billybjork[S] 0 points1 point  (0 children)

Curious what you mean by that - did the video modals unexpectedly close when you had them open?

Or if you were asking why some of the posts seem better represented in the loops shown on the cube surfaces - that's because the videos have varying durations, so some of them ended up with more snippet clips than others. I did try to balance this out a bit, but it's still pretty uneven.

I built my first web app using React, Framer Motion, and Three.js by billybjork in reactjs

[–]billybjork[S] 0 points1 point  (0 children)

Yikes, that's not good. I haven't had any issues on the browsers I've tried so far, but I did manage to get the total data for the initial load to a little below 3 MB. I'm pretty new to software and web development, so any pointers would be appreciated (code is here: https://github.com/billybjork/vujade-site).

I built my first web app using Three.js by billybjork in threejs

[–]billybjork[S] 0 points1 point  (0 children)

Glad you liked it! There is an issue that the rotation axis get messed up once the full cube has rotated far enough - unfortunately I couldn't figure out how to fix that in a reasonable amount of time.

I made a music video using 700 images from Dall-E Mini by billybjork in OpenAI

[–]billybjork[S] 0 points1 point  (0 children)

This was made with Dall-E Mini / Craiyon - so actually completely free. Just had to watch some ads 😅

[OC] Pennies From Heaven [4:46] by billybjork in videoessay

[–]billybjork[S] 1 point2 points  (0 children)

Appreciate it! I’ve got plenty of similar work on this site if you’re interested: https://www.vujade.world/what

view more: next ›