Yehonatan Daniv

@getwebstudio Actually second. Wix have been using it in prod for quite some time now, but kudos! BTW, it can be off main thread in Blink, but currently not in WebKit on STP

Native scroll-driven animations engine is live! Webstudio is the first builder to leverage the latest web standard — the Scroll Timeline API — which allows animations to run at 120 FPS off the main thread. youtu.be/cxsjKsqrn0Y

@bramus This sucks so much! It's great to see you guys showing your support for him so openly

Adam is the brightest, most authentic, inspiring, truly creative, high performing, deeply passionate, and nice person I have ever worked with. And then my employer decided to terminate his role. I am gutted and sick to my stomach. I will miss you, my friend 💔

Can't wait for this to happen 🤩🥳

@Keithamus That was an excellent read. I can totally relate. Will recommended it for sure

@mattgperry The problem with animating custom properties is that this happens on the main thread (unless this was fixed on Chrome?)

💡 There is a free performance improvement you can make right now to your CSS variable animations (if they're scoped to the current element). Register your CSS variable the inherits: false option. Depending on the size of the style recalcs this can be a huge saving.

oh my

@RobinPayot sent DM, hope you got it

👋 Looking for a freelance project starting in November, I'm available for Front-end development, #webgl #tsl #UI #JavaScript #React #Vue #CMS #animation

@Rich_Harris @stubbornella @WebReflection Did you try adding `will-change: filter`? Sometimes it does the trick when the filter property in SF is expected to change.

Quick screen recording — 17.6 on the left, STP on the right. Both are broken but STP is much worse. Filters by themselves cause rendering issues (notice the missing drop shadow on the dropdown, followed by the failure to repaint the area when it goes away, and the flickering around the screenshots on 17) but the combination of filters and transforms seems to send STP completely over the edge. Chrome and FF both render it flawlessly. We thought we'd fixed it with a transform3d hack (see the --safari-fix CSS custom property) but apparently not. Apologies for succumbing to my baser instincts and venting publicly; I was truly at the end of my tether. All the new features Safari has been implementing over the last few months are very welcome but to a lot of devs it does feel like it's come at the expense of the basics, unfortunately.

just so you know, everything is ready to launch but we're debugging some insane safari bugs which happens every time i try and build something just an unforgivably awful piece of software. i hate it so much.

@anatudor according to spec it's just a value, so it can be computed. Didn't work anywhere?

Because I saw someone hearted codepen.io/thebabydino/pe… I got reminded of smth I need for animations like this: to be able to use #CSS vars to compute keyframe percentages. 16 columns, each using a different set of keyframes whose % needs to be different depending on column index.

I usually don't say much in WG's meetings, but I think I'm glad I've insisted on this one being inherited default 😝

@bramus Speaking of which, they're also adding animation-timeline to the animation shorthand: bugs.webkit.org/show_bug.cgi?i…, this wasn't added in Chrome: jsbin.com/qefoyej/edit?c…, any plans on adding?

And the next one related to scroll-driven animations got fixed: bugs.webkit.org/show_bug.cgi?i… IT'S HAPPENING, PEOPLE! 🤩 Get prepared for it now, by checking out scroll-driven-animations.style for demos and a free video course!

👀 There's some interesting movement happening in WebKit wrt Scroll-Driven Animations … bugs.webkit.org/show_bug.cgi?i…

I am really happy working on animations

@stubbornella So true! Doesn't end at 7yo am afraid 😭

So true, also what is this and why is everyone talking about it?

@jaffathecake Strange! We already switched, didn't notice anything e.g: yehonatand9.wixsite.com/transparent-he… Maybe I'm not seeing it?

@YDaniv I've found the result poor in Chrome and Safari #comment4" target="_blank" rel="nofollow noopener">issues.chromium.org/issues/4090259…

📝 I set off to find the best way to make video with transparency work on the web. Over 10 bug reports later, it turns out it's better to handle the transparency manually with WebGL. Here's how: jakearchibald.com/2024/video-wit…

@jaffathecake Oh, And you can switch to video.requestVideoFrameCallback(), it's in Interop 24!

@jaffathecake You did awesome work on the research + opening all the bug reports! I guess we could do a follow up with opening the Transparent Video filter for kampos: github.com/wix-incubator/… - the lib we use for that internally

@jaffathecake Yeah, you can see the links in the codepen, we just put the luminance part at the bottom (:

@YDaniv Ohhh do you do the same double height trick?

@jaffathecake Plus there's another cool technique, if you don't want to use WebGL, you can simply use SVG: codepen.io/ydaniv/pen/gJK… Unfortunately this only works on Chromium ): FF has an old bug with video + filter SF can't do SVG filter on video - will be solved with LBSE - using image there

This was reposted (: