Samples for the specifications of the Houdini task force.
Each sample has its own folder with a link to a video showing that sample, as no vendor has published a version of their browser with support for any of the Houdini standards yet.
Apache 2
Demos for different Houdini APIs
Home Page: https://googlechromelabs.github.io/houdini-samples/
License: Apache License 2.0
Samples for the specifications of the Houdini task force.
Each sample has its own folder with a link to a video showing that sample, as no vendor has published a version of their browser with support for any of the Houdini standards yet.
Apache 2
Setting a value for a typed custom property on a container has no effect on its value for the elements inside. In other words the value doesn't cascade. Here's and example demonstrating what I mean.
Is this by design? Are there other differences between "regular" and typed custom properties?
The docs on this are a bit old and even new ones from Sept say 'we are working on getting paintAPI pant worklets off the main thread.' Is there an update on there this is at? Can we use in production with a pollyfill for Safari? Thanks.
I'm sure the writers had a good reason to do this, but I don't see why registering a new custom property has to be done from JS.
IMHO a syntax like
--custom-prop: * <length>;
has a few major advantages compared to
CSS.registerProperty({
name: '--custom-prop',
syntax: '<length>',
initialValue: '*'
});
I guess a PostCSS plugin could make both of these syntaxes possible, I just don't understand the initial decision.
What am I missing?
Recently .import() method was renamed to .addModule() w3c/css-houdini-drafts#374 (comment)
It's already implemented in Chrome Canary and throws errors.
The spec for CSSStyleValue
now uses a stringifier rather than a cssText
property (https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue), so the examples should be changed to match.
The Twitter demo at the link doesn't seem to be having the expected effect even with Experimental Web Platform features enabled. The Profile picture just continues scrolling out of view.
https://googlechromelabs.github.io/houdini-samples/animation-worklet/twitter-header/
Chrome Version: Version 66.0.3359.181
The paint worklet API isn't exposed under HTTP in Chrome, the link in the project description should be changed to be: https://googlechromelabs.github.io/houdini-samples/
<div class="small"><img src="images/01.jpg" /></div> var smallContent = document.querySelector('.small'); new KeyframeEffect(smallContent, [{ 'opacity': 1 }, { 'opacity': 0 }], { duration: 7, fill: 'forwards', delay:5000, iterations:1 })
In the above keyframe effect, the below mentioned options are not working:
From html page we can only call either “play()” to start the animation or “cancel” to stop and remove the animation.
How to handle “Pause” and “Finish” animations?
Also, no documentation regarding, how to pass values to “additionalTimelines_” variable of “WorkletAnimation” class.
Need your input.
Tried Browser versions:
I was playing around with animating different custom properties, and found that while it works as expected for and , it fails for .
Here's a codepen with and example.
Is this not implemented yet in Chrome, or am I misunderstanding/misusing something?
This example does not work for me in the latest Chrome. The image stays in the 'unloaded' state indefinitely.
I'm not sure if this is a Chromium bug or if the example is outdated.
In Chrome 78, error occurs:
The layout function must be async or return a promise, falling back to block layout.
This is due to https://chromium.googlesource.com/chromium/src/+/9c224451fb63df743fbd510052458e088a438517
(from iamvdo/css-houdini.rocks#6)
The Twitter demo says that the CSS Paint API is required, however, my understanding is that the Paint API is currently supported and the Demo is actually for the Animation API?
Hi 👋
Thanks for this module! Your examples have been very helpful.
Now, I'm confused about the scope of Worklets, the posts about worklets say they are like a lightweight web wroker, so, because of some of their similarities I though I could use the sames APIs availaible for workers, but that isn't true.
My specific use case, is that I was trying to draw an Image from a paintWorklet.
Here is the code of my worklet
registerPaint('tiles', class {
paint (ctx, geom, properties) {
fetch('https://mdn.mozillademos.org/files/5397/rhino.jpg')
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then(bitmap => {
ctx.drawImage(bitmap, 33, 71, 104, 124, 21, 20, 87, 104)
})
}
})
This throws that fetch is not defined
So the question is, what APIs are availaible from a paintworklet? or any worklet?
Where should one put a piece of code in a paintAPI worklet that needs to run only once (e.g. things you'd normally put in the constructor).
It's possible to do something like
this.x = this.x || this.calculateX()
in the paint method, but it feels a bit old school.
The parallax demo at the link only seems to work if I disable Experimental Web Platform features.
https://googlechromelabs.github.io/houdini-samples/animation-worklet/parallax-scrolling/
Chrome Version: Version 66.0.3359.181
Not sure why, cant see any error message, the tab just hangs. Same in Canary.
Due to spec-change? Would be supercool to be able to try the demos out ;)
When using provided links for video samples, for example- in the twitter-header folder, YouTube says the videos have been made private.
Is there any other way to check the samples out? Or do the links need updating?
(P.S- Trying to access the videos from India, if that is of any concern.)
I'm confused as to how we're meant to play with these demos locally?
CSS.paintWorklet
is only available over https
, so I've had no luck with a localhost
server. And opening the html
files directly leads to a CORS error for the js
files.
Some instructions as to how we're meant to run these demos or develop against this API would be really helpful!
When opening https://googlechromelabs.github.io/houdini-samples/paint-worklet/diamond-shape/ in Chrome 65, the diamond shape does not display.
Expected: https://developers.google.com/web/updates/2018/01/paintapi#thinking_outside_the_box
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.