Alternative syntax for animation worklet

animation-worklet-alt-syntax.js

// Example 1: Fade-in with spring timeing function

registerAnimator('fancyFadin', class {
  static handles = {
    'default': Style(['opacity', '--spring-k']);
  }

  animate(timestamp, handles) {
    handles.default.forEach(elem => {
      // read a custom css property.
      const k = elem.get('--spring-k');
      // compute progress using a new timing function.
      const progress = springTimingFunction(timestamp, k);
      // update opcity accordingly.
      elem.opacity = progress; 
    });
  }

  springTimingFunction(timestamp, k) {
    // calculate fancy timing function.
    return 42;
  }
  
});

// In JS on Main thread 
const animator = new Animator('fancyFadin', {
  'default': elem1
});

// Or declaratively in CSS
.myFadin {
  animate: animator('fancyFadin' 'default') /* 'default' may be ommited */
}

<section class='myFadin'></section>
<section class='myFadin' style="--spring-k: 25;"></section>

// Example 2: Multiple Parallax with different rates

registerAnimator('parallax', class {
  static handles = {
    'scroller': [ScrollInput, Style('--parallax-id')]
    'background': Style(['transform', '--parallax-rate', '--parallax-id']) // TODO: We should be able to specify if the property is Read or Write or both
  };
  
  animate(timestamp, handles) {
    handles.scroller.forEach(scroller => {
      // filter only those backgorunds that are related to this scroller.
      const id = scroller.parallaxId;
      handles.background.filter(b => { b.parallaxId == id }).forEach(background => {
        // read scroller vertical scroll offset.
        const scrollTop = scroller.scrollTop;
        // reac parallax rate.
        const rate = background.parallaxRate;
        // update parallax transform.
        let t = background.transform.m42;
        t =  rate * scrollTop;
        outputs.parallax.transform = new CSSTransformValue(... t);
      });
    });
  }
});

<div class='prallax_scroller' style='--prallax-id:"one"'>
<div class='prallax_background' style='--prallax-id:"one"; --parallax-rate: 0.2'>
<div class='prallax_background' style='--prallax-id:"one"; --parallax-rate: 0.5'>
</div>

<div class='prallax_scroller' style='--prallax-id:"two"'>
<div class='prallax_background' style='--prallax-id:"two"; --parallax-rate: 0.1'>
</div>


// ScrollSource, and Style are just factories that take in elements and return an AnimationHandle
// Q: why separate ScrollSource from Style? What if we need both on the same element?

// Additional feature: observing handles. The animator can define an observer on handle so any
// mutation (add,remove) on handles can be efficiently observed

registerAnimator('abc', class {
  static handles {
   'scroller': {
      factory: Style('--parallax-id')
      observer: scrollerObserver 
    } 
  }

  scrollerObserver(records) {
    // handle when a scroll observer is added or removed
  }
});

// Q: what happens if the same animation is defined multiple times for an elements? CSS conflict resolution?
// Q: what happens if multiple animations try to mutate the same value. (Also relationship with CSS animations)