Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bouncing DVD Logo

bouncingdvdlogo.com

Post reply on HN
Print view View original

31–40 of 293 posts

Re: Bouncing DVD Logo

#31

Post by ajflores1604 »

aphextron wrote: post #10
pier25 wrote: post #5

I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.

As someone who's new to front end and css is there a good resource on what properties are more costly, or which functions are newer and meant to be more performant like translate3d is mentioned as being gpu accelerated? I've seen mentions of reflow, repaint, and layout thrashing but not a comprehensive list of what functions are meant to replace what other ones, or relative cost of each function in common use cases. I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on.

Re: Bouncing DVD Logo

#32

Post by dewey »

tantalor wrote: post #28

Why do people bother minifying code this small? It's 168 bytes gzipped. The unminified source is probably under 1kb gzipped. Just no point to minifying.

Probably more work to rip it out of your build pipeline than just reusing the config you use for all your other projects.

Re: Bouncing DVD Logo

#33

Post by augusto-moura »

tantalor wrote: post #24
aphextron wrote: post #10

Earlier quoted context omitted.

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.

Ooh you could even animate with a css transition from one bounce to the next with a linear curve; then you don't run any JS per frame, only at the bounces.

The problem I think is that transitions have fixed amount of time, both long and short travels finish with the same amount of time giving a different velocity of movement. Also executing Javascript every frame is not that heavy

Re: Bouncing DVD Logo

#34

Post by dewey »

_bxg1 wrote: post #25
Groxx wrote: post #15

Earlier quoted context omitted.

I always think of https://www.youtube.com/watch?v=m8NAlDOCG6g when anything dvd-logo-related comes up

That's pretty funny, but I think it's also fake

It's a pretty common template (https://www.youtube.com/watch?v=DuZP37qwzAE) for inserting videos. You can see the original video on the corners of the black overlay.

Re: Bouncing DVD Logo

#35

Post by pacomerh »

a long time ago I went into my living room and saw my parents very quiet sitting down looking at the dvd logo bounce. So I asked, what are you doing, and they said, oh we've been here waiting for the logo to hit the corner...:D

Re: Bouncing DVD Logo

#36

Post by 1123581321 »

nikital wrote: post #9

A while ago I made a bouncing DVD logo that would actually hit the corner every few bounces with high probability: https://nikital.github.io/screensaver (But then it would troll you just before hitting it)

I love this. And for the first few bounces, I was worried the real troll was that it would never even approach the corner. :)

Re: Bouncing DVD Logo

#38

Post by jayflux »

aphextron wrote: post #10
pier25 wrote: post #5

I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... Jesus it's 2020 at least use requestAnimationFrame! https://flaviocopes.com/requestanimationframe/

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.

This looks like it’s just 2D so translate() would be enough, almost all of the functions under transform are GPU accelerated.

Re: Bouncing DVD Logo

#39

Post by [deleted] »

jonny_eh wrote: post #27
kroltan wrote: post #18

Earlier quoted context omitted.

It's not just about speed, it's about timing. With setInterval the alignment of the screen refresh and the code to update will quickly become out of sync and cause periods where 2 frames are the same.

Which causes visual tearing.

[deleted]

Re: Bouncing DVD Logo

#40

Post by [deleted] »

tantalor wrote: post #24
aphextron wrote: post #10

Earlier quoted context omitted.

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.

Ooh you could even animate with a css transition from one bounce to the next with a linear curve; then you don't run any JS per frame, only at the bounces.

[deleted]
Post reply on HN