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

Time-Based CSS Animations

yuanchuan.dev

Post reply on HN
Print view View original

41–49 of 49 posts

Re: Time-Based CSS Animations

#41

Post by easyThrowaway »

afavour wrote: post #23
9dev wrote: post #3

Earlier quoted context omitted.

That should also enable iOS style, scroll-offset bound animations, right?

Scroll linked animations are the best way to do that: https://web.dev/shows/http-203/Qf5wdXOxW3E Sadly no Safari support yet. (attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)

Unfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.

Re: Time-Based CSS Animations

#42

Post by afavour »

easyThrowaway wrote: post #41
afavour wrote: post #23

Earlier quoted context omitted.

Scroll linked animations are the best way to do that: https://web.dev/shows/http-203/Qf5wdXOxW3E Sadly no Safari support yet. (attaching an active JS event listener to scroll is considered bad because it means your scroll movement gets tied up in the JS event loop. On a fast device it’ll probably be fine but on a slower one things can start getting choppy pretty easily)

Unfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.

The exception there is hardware accelerated CSS transforms, which will work great.

Re: Time-Based CSS Animations

#43

Post by rasz »

afavour wrote: post #42
easyThrowaway wrote: post #41

Earlier quoted context omitted.

Unfortunately if you're doing any sort of DOM manipulation linked to scroll events it will cause stalls in the main rendering thread, at least on Chrome, and slow down even on faster machines.

The exception there is hardware accelerated CSS transforms, which will work great.

"hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(

Re: Time-Based CSS Animations

#44

Post by easyThrowaway »

rasz wrote: post #43
afavour wrote: post #42

Earlier quoted context omitted.

The exception there is hardware accelerated CSS transforms, which will work great.

"hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(

I should check it on a more recent release, but at least on Chrome 80-ish and earlier CSS transforms were evaluated fully in software mode when blending filters or transparency effects were active, at least on mac os.

Re: Time-Based CSS Animations

#45

Post by afavour »

rasz wrote: post #43
afavour wrote: post #42

Earlier quoted context omitted.

The exception there is hardware accelerated CSS transforms, which will work great.

"hardware accelerated" CSS transforms take ~30% of one CPU thread in Chrome, thats a very specific definition of great :(

That’s not what I’ve observed. But in any case, the point in the context here is that such CPU usage doesn’t tie up the JS event loop.

Re: Time-Based CSS Animations

#46

Post by spartanatreyu »

keepamovin wrote: post #20

I wanted this for a while so I could do a 'box-breathing' thing. With the inhale-hold-exhale-hold stages all being customizable to fit your body and go for the effect you wanted. Could not figure out a way to do it (sans JS or insane complexity) without something like what's on this page. Holy stylesheets! This page has really creative demos!!! Haha :)

Isn't that just an animation curve in css?

Re: Time-Based CSS Animations

#47

Post by pax_americana »

joestrong wrote: post #10
TekMol wrote: post #6

CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions CSS can not start a timer like JavaScript does, but nowadays it's possible to define a custom variable with the CSS Houdini API to track time in milliseconds. Why do we need all this when we have JavaScript? Shouldn't the drawing layer be concerned with drawing primitives? Why put more and more of the higher layers i…

Don't forget that CSS animations are hardware accelerated. If you're doing trig in JS for animations, you're probably also manipulating the DOM to update the UI every millisecond, which is very expensive

If you’re doing animations in JS, better do it with the Web Animations API since it’s also hardware accelerated.

Re: Time-Based CSS Animations

#48

Post by keepamovin »

spartanatreyu wrote: post #46
keepamovin wrote: post #20

I wanted this for a while so I could do a 'box-breathing' thing. With the inhale-hold-exhale-hold stages all being customizable to fit your body and go for the effect you wanted. Could not figure out a way to do it (sans JS or insane complexity) without something like what's on this page. Holy stylesheets! This page has really creative demos!!! Haha :)

Isn't that just an animation curve in css?

I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states.

I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/

Re: Time-Based CSS Animations

#49

Post by spartanatreyu »

keepamovin wrote: post #48
spartanatreyu wrote: post #46

Earlier quoted context omitted.

Isn't that just an animation curve in css?

I couldn't figure it out. I mean, could you have a go at it? Like I want each of the 4 edges to be parameterizable (by a CSS var) so I can add a slider to adjust how long the circle stays in each of the states. I'm thinking of a customizable CSS version of: https://quietkit.com/box-breathing/

Well I could replicate that example with an animation curve using only css:

https://codepen.io/spartanatreyu/pen/YzbPjwg?editors=1100

But if you want each step's duration to be parameterizable then you'll need to reach for js, I'd recommend the Animation API.

Post reply on HN