AnimationWorklet article #6701

surma · 2018-10-08T15:15:44Z

What's changed, or what was fixed?

New article on Houdini’s AnimationWorklet

Target Live Date: ASAP

This has been reviewed and approved by (@jakearchibald)
I have run npm test locally and all tests pass.
I have added the appropriate type-something label.
I've staged the site and manually verified that my content displays correctly.

CC: @petele @jpmedley @majido @flackr

@petele PTAL, specifically at videos and the code-in-tables situation :)

jpmedley

Surma,

I hope you don't feel too beat up by this. Your writing is always pretty clean of typos and easy to understand. What I hope you notice is that my suggestions are about writing simpler sentences and removing words that don't contribute meaning.

jpmedley · 2018-10-10T16:13:12Z

src/content/en/updates/2018/10/animation-worklet.md

@@ -0,0 +1,493 @@
+project_path: /web/_project.yaml
+book_path: /web/updates/_book.yaml
+description: Houdini’s Animation Worklet


Copy the snippet to here.

jpmedley · 2018-10-10T16:15:17Z

src/content/en/updates/2018/10/animation-worklet.md

+**TL;DR:** Animation Worklet allows you to write imperative animations that run
+at the device's native frame rate for that extra buttery jank-free smoothness™,
+make your animations more resilient against main thread jank and can be linked
+to scroll instead of time. Animation Worklet is in Chrome Canary (behind the


change to: 'and are linkable to scrolling instead of time.'

jpmedley · 2018-10-10T16:17:19Z

src/content/en/updates/2018/10/animation-worklet.md

+
+## Another Animation API?
+
+Actually no, it is an extension of what we've already have, and with good


"we've" to "we".

jpmedley · 2018-10-10T16:18:30Z

src/content/en/updates/2018/10/animation-worklet.md

+## Another Animation API?
+
+Actually no, it is an extension of what we've already have, and with good
+reason! Bear with me, let's start at the beginning: What do we have? If you want


Delete 'Bear with me,'. Change rest to: 'Let's start at the beginning. If you want...'

jpmedley · 2018-10-10T16:19:51Z

src/content/en/updates/2018/10/animation-worklet.md

+simple A to B transitions, [CSS
+Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) for
+potentially cyclical, more complex time-based animations and [Web Animations
+API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) (or


Delete 'or'.

jpmedley · 2018-10-10T17:20:39Z

src/content/en/updates/2018/10/animation-worklet.md

+thread or run in a separate thread in sync with the compositor.
+
+Note: You should try avoiding "slow" properties at all costs. Limit yourself to
+animation `opacity` and `transform` to make sure your animations run smooth even


'smooth' to 'smoothly'

jpmedley · 2018-10-10T17:22:59Z

src/content/en/updates/2018/10/animation-worklet.md

+access to all the new goodness at the same time.
+
+Animation Worklet is in Canary and we are aiming for an Origin Trial with Chrome
+69. We are eagerly awaiting you to build great new experiences on the web and


We're 6 days from 70 going to stable.

That is correct. The more accurate timeline is that it will be in origin trial for 71. Time flies.

jpmedley · 2018-10-10T17:24:30Z

src/content/en/updates/2018/10/animation-worklet.md

+access to all the new goodness at the same time.
+
+Animation Worklet is in Canary and we are aiming for an Origin Trial with Chrome
+69. We are eagerly awaiting you to build great new experiences on the web and


Change to 'We are eagerly awaiting your great new web experiences and hearing about what we can improve.'

jpmedley · 2018-10-10T17:25:05Z

src/content/en/updates/2018/10/animation-worklet.md

+69. We are eagerly awaiting you to build great new experiences on the web and
+telling us about your experiences and what we can improve. There is also a
+[polyfill](https://github.com/GoogleChromeLabs/houdini-samples/blob/master/animation-worklet/anim-worklet.js)
+that gives you the same API, but doesn't provide the performance isolation.tion.


Delete 'tion.'

jpmedley · 2018-10-10T17:25:27Z

src/content/en/updates/2018/10/animation-worklet.md

+[polyfill](https://github.com/GoogleChromeLabs/houdini-samples/blob/master/animation-worklet/anim-worklet.js)
+that gives you the same API, but doesn't provide the performance isolation.tion.
+
+Keep in mind that CSS Transitions and CSS Animations are still very valid


delete 'very'

majido · 2018-10-10T19:35:16Z

src/content/en/updates/2018/10/animation-worklet.md

+second you start scrolling up, it comes back into view, even if you are half way
+down that page. The animation depends not only on scroll position, but also on
+your previous scroll direction. It is _stateful_.
+


Interesting example. I think there are two different things at play in this example:

Direction itself is a state: to compute direction one needs to know the previous scroll position.

You can think of this animation effect as if it is trying to keep the address bar attached to a particular baseline position as page is scrolled. In this model, the baseline position is also state.

Here is how the animation behaves:

A) page is scrolling up (swipe down gesture) and address bar is fully shown => do not move the address bar and instead reset the baseline position.

B) page is scrolling down (swipe up gesture) or address bar is not fully shown => move the address bar as if it is attached to the baseline position.

C) scrolling is finished (i.e., animation) => reset the baseline to top of the document (so next time if user is scrolling up) it starts coming back into view.

Here both A & C are updating the state but there is a subtle difference: only (A) requires the animation itself to be stateful. (C) can be achieved even if state is kept outside the animation.

I think the example you gave 'But the second you start scrolling up, it comes back into view, even if you are half way down the page' is highlighting (C) but I think the case is more clear if we highlight (A) instead. Honestly this is a subtle distinction and maybe not worth trying to clarify.

Also perhaps worth making it clear that computing direction itself requires state (i.e., previous position). Another example of this is "velocity".

You are technically correct. I’d like to lead this with a visual example of statefulness, even if the actual state is something else. When people start building this, they will hopefully discover what to do :D

majido · 2018-10-10T19:54:16Z

src/content/en/updates/2018/10/animation-worklet.md

+        // Some math to make sure that `localTime` is always > 0.
+        effect.localTime = 2000 + this.direction * (currentTime % 2000);
+      }
+      destroy() {


We have resolved to move away from having a destroy hook. Instead the plan is to have the state as a property the class. However this is not been implemented or specc'ed.

We also plan to have the statefullness be clearly stated via a parent class that should be extended.

So I think the ultimate syntax will be something like.

registerAnimator('randomspin', class MyEffect extends StatefulAnimator { constructor(options = {}, state = {}) { this.direction = state.direction || (Math.random() > 0.5 ? 1 : -1); } animate(currentTime, effect) { // Some math to make sure that `localTime` is always > 0. effect.localTime = 2000 + this.direction * (currentTime % 2000); } get state() { return { direction: this.direction }; } }

Given however that this is not yet specc'd (my bad 😢 ), perhaps it is fine to talk about destroy hook and then have a note with a link to potential changes.

lol. I will add a note for now and update the article once it’s specced and landed :)

surma · 2018-10-10T22:09:07Z

Joe, I 100% appreciate you taking the time to give this monster an in-depth review. Thank you very much.

Waiting for a LGTM from @petele and then this is probably good to go :)

majido · 2018-10-11T14:36:27Z

src/content/en/updates/2018/10/animation-worklet.md

+Note: You should avoid "slow" properties at all costs. Limit yourself to
+animation `opacity` and `transform` to make sure your animations run smoothly
+even on slow devices. Currently, Chrome's implementation doesn't even allow you
+to animate slow properties with AnimationWorklet and will throw a warning at


We now support slow properties in AnimationWorklet. They just run in sync with main thread. So they still have to be avoided. Here is a demo of width animating with a worklet.

Also we are actually going to remove the warning from devtools. We feel it is a bit spammy and not appropriate for console. We should instead expose this in devtools elsewhere (e.g., in animations panel). So maybe not mention this.

WebFundBot · 2018-10-11T20:52:34Z

Whoops!

There were 2 warnings that will prevent this PR from being merged. Please take a look, and either fix, or provide a justification for why they can't be fixed.

WARNINGS
src/content/en/updates/2018/10/animation-worklet.md#L493 - Consider adding a "was this page helpful?" widget to your page: https://developers.google.com/web/resources/widgets#helpful
src/content/en/updates/2018/10/animation-worklet.md#L221 - Common typo found: 'implicity' Should it be 'implicitly'?

WebFundBot · 2018-10-11T21:58:40Z

🎉 This has been pushed live to https://developers.google.com/web/

surma added 2 commits October 6, 2018 12:44

Animation worklet article

57687d7

Final polish

3bf9a2e

surma requested review from petele and jpmedley October 8, 2018 15:15

googlebot added the cla: yes label Oct 8, 2018

jpmedley suggested changes Oct 10, 2018

View reviewed changes

majido reviewed Oct 10, 2018

View reviewed changes

surma force-pushed the animationworklet branch 2 times, most recently from af2590d to 3ce6963 Compare October 10, 2018 22:08

Review by Joe

ec97e7d

surma force-pushed the animationworklet branch from 3ce6963 to ec97e7d Compare October 10, 2018 22:52

majido reviewed Oct 11, 2018

View reviewed changes

jpmedley approved these changes Oct 11, 2018

View reviewed changes

Remove remark about slow properties

cd223b9

surma merged commit 72182b3 into master Oct 11, 2018

surma deleted the animationworklet branch October 11, 2018 21:07

WebFundBot added the DevSite:Live label Oct 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AnimationWorklet article #6701

AnimationWorklet article #6701

surma commented Oct 8, 2018 •

edited

jpmedley left a comment

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

majido Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

jpmedley Oct 10, 2018

majido Oct 10, 2018

surma Oct 10, 2018

majido Oct 10, 2018

surma Oct 10, 2018

surma commented Oct 10, 2018

majido Oct 11, 2018

WebFundBot commented Oct 11, 2018

WebFundBot commented Oct 11, 2018


		## Another Animation API?

		Actually no, it is an extension of what we've already have, and with good

AnimationWorklet article #6701

AnimationWorklet article #6701

Conversation

surma commented Oct 8, 2018 • edited

jpmedley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

surma commented Oct 10, 2018

Choose a reason for hiding this comment

WebFundBot commented Oct 11, 2018

WebFundBot commented Oct 11, 2018

surma commented Oct 8, 2018 •

edited