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

81–90 of 293 posts

Re: Bouncing DVD Logo

#81

Post by glitchdout »

ajflores1604 wrote: post #31
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.

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.…

opacity and transform (translate, scale, rotate and skew). That's mostly it.

https://www.html5rocks.com/en/tutorials/speed/high-performan...

Re: Bouncing DVD Logo

#82

Post by aphextron »

ajflores1604 wrote: post #31
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.

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.

All I can say is use it, a lot. CSS skills are more of a dark art than anything resembling engineering. And the only way you get good is by trial and error, learning what works best and why.

Re: Bouncing DVD Logo

#83

Post by jrockway »

ricardobeat wrote: post #57
odensc wrote: post #55

Earlier quoted context omitted.

I have a 60fps + 144fps monitor setup and when I move it to my high refresh rate one, it goes hyperspeed :) You should calculate delta time with performance.now() and change position based off of that.

Haha, indeed. A correct implementation would calculate (pixel) movement speed based on a delta from last frame, left that out to simplify the code. EDIT: I added a simple rate-limiting function :)

I tried it on my 120Hz monitor, looks great.

Re: Bouncing DVD Logo

#84

Post by [deleted] »

SergeAx wrote: post #73
ricardobeat wrote: post #48

Earlier quoted context omitted.

It's just a less-than-ideal implementation, your CPU is most definitely not suffering. Here is a completely smooth version: https://codesandbox.io/s/nostalgic-cherry-wwpzj?file=/src/in... (I made the exact same thing last year as a joke for our team monitors)

On my Chrome there are flashing scrollbars when logo hits right or bottom boundary. No wonder modern frontend is such a mess.

[deleted]

Re: Bouncing DVD Logo

#85

Post by [deleted] »

kens wrote: post #60

As a historical note, the bouncing logo wasn't just for fun, but was important to prevent screen burn-in on CRTs. If you had a static image on a CRT for a long time, it could damage the phosphor. Sometimes you could even see the image when the screen was off! This was the original purpose of screensavers, which saved your screen from damage. Displaying a dynamic image prevented one part of the screen from being overu…

[deleted]

Re: Bouncing DVD Logo

#86

Post by cpach »

fred_is_fred wrote: post #80
hadlock wrote: post #68

Earlier quoted context omitted.

That you feel the need to inform us of this "historical fact" makes me feel especially old... having lived through the CRT -> LCD transition period when buying an LCD made going to LAN parties a lot easier

It didn't even occur to me that this would need to be explained. Up next we should talk about why it was bad to leave VCRs paused for long periods of time.

Why was that bad?

Re: Bouncing DVD Logo

#87

Post by jannes »

cpach wrote: post #86
fred_is_fred wrote: post #80

Earlier quoted context omitted.

It didn't even occur to me that this would need to be explained. Up next we should talk about why it was bad to leave VCRs paused for long periods of time.

Why was that bad?

I believe because the tape will stay under tension

Re: Bouncing DVD Logo

#88

Post by ricardobeat »

californical wrote: post #71
xenonite wrote: post #62

Earlier quoted context omitted.

I am sorry to say, but my MacBook Pro 2014 i7 is stuttering in Safari 11.1 on a 4k external screen.

It lags pretty bad on my Pixel phone too..

Only tested on an iPhone, works fine at 60fps. You can open the standalone page at https://wwpzj.csb.app/ to avoid the whole codesandbox app running at the same time.

Re: Bouncing DVD Logo

#89

Post by tunnuz »

Arbalest wrote: post #74
kens wrote: post #60

As a historical note, the bouncing logo wasn't just for fun, but was important to prevent screen burn-in on CRTs. If you had a static image on a CRT for a long time, it could damage the phosphor. Sometimes you could even see the image when the screen was off! This was the original purpose of screensavers, which saved your screen from damage. Displaying a dynamic image prevented one part of the screen from being overu…

DVD was also popular around the time that Plasmas were being introduced, which also had burn in issues.

Aren’t DVDs popular anymore?

Re: Bouncing DVD Logo

#90

Post by mortenjorck »

cpach wrote: post #86
fred_is_fred wrote: post #80

Earlier quoted context omitted.

It didn't even occur to me that this would need to be explained. Up next we should talk about why it was bad to leave VCRs paused for long periods of time.

Why was that bad?

I remember being told as a child that it "wears out the tape," but I'm going to guess it's specifically because the same section of tape stays wrapped around the capstan (the metal cylinder it loops around to be read) when it would normally be passing through. Keeping the same section of tape under tension for a prolonged period presumably weakens or risks distorting it.
Post reply on HN