steren’s avatarsteren’s Twitter Archive—№ 3,496

  1. Want to use fancy visual effects for your web elements or page? Consider doing it in CSS with the CSS Paint API: You get a canvas context, and can paint anything. Read developers.google.com/web/updates/2018/01/paintapi Possibilities are endless (e.g. ripple effect lab.iamvdo.me/houdini/ripple)
    OpenGraph image for developers.google.com/web/updates/2018/01/paintapiOpenGraph image for lab.iamvdo.me/houdini/ripple
    On twitter.com ↗ steren’s avatar 2018 Mar 15 Mood +1 🙂
    1. …in reply to @steren
      In the Ripple example, JS is only used to set a CSS variable on the element with the coordinates of the click and the frame number: github.com/GoogleChromeLabs/houdini-samples/blob/master/paint-worklet/ripple/index.html#L57 The actual painting is done via a paint worklet. DasSurma couldn't the "tick" be updated using a CSS transition instead?
      OpenGraph image for github.com/GoogleChromeLabs/houdini-samples/blob/master/paint-worklet/ripple/index.html#L57
      Permalink On twitter.com ↗ steren’s avatar 2018 Mar 15 Mood 0