majido

(function(){
  // Override function in given prototype to add a log statement 
  function logMethod(prototype, fname) {
    if (!(fname in prototype)) {
      console.warn("Warning: can't instrument " + prototype.constructor.name + '.' + fname);
      return;
    }
    var original =  prototype[fname];
    
    prototype[fname] = function() {

majido

/* jshint esnext: true */

// A simple experimental poly-fill to create a global flag that controls scroll restoration.
// To use simply set window.history.scrollRestoration to 'manual' or 'auto'.
// Requires Chrome v44 with "--enable-web-experimental-features" flag.
(function(window, console, undefined) {
  "use strict";
  var history = window.history;

  // History API does not support scroll restoration option

majido

// Translate Event.timeStamp to a DOMHighResTimeStamp that can be compare with
// performance.now(). this becomes a no-op for browsers that provide 
// high resolution event timestamp.
toHighResTimeStamp = (function(testTimeStamp){
  function timeNear(a, b) {
    var d = 1000 * 60 * 5;
    return a > b - d && a < b + d;
  }

  var timebaseDelta_ = 0;

majido

// Browsers (and the DOM spec) are in the process of moving the event timestamp
// from being a DOMTimeStamp (mostly relative to Date.now()) to being
// a DOMHighResTimeStamp (always relative to performance.now()).

// A simple polyfill for making Event.timeStamp to always be a
// DOMHighResTimeStamp that can be compared with performance.now(). This becomes
// a no-op for browsers that provide high resolution event timestamp.

// Compatibility:
// At the moment it is IE9+ as it requires: |performance.now| which is IE9+

majido

// 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.

majido

animationWorklet.import('twitter-header-animator.js').then( _ => {
	var anim = new WorkletAnimation('twitter-header', 
	 [document.timeline, new ScrollingTimeline(scrollingElement, {/* options for timeline */})],
	 {
	   targets : {
	      bar: element1,
	      avatar: [element2, element3],
	    },

	    timing: {

majido

// Finds minimum resolution Δ given a set of samples which are known to be in the form of N*Δ.

function computeGCD(a, b) {
  if (!Number.isInteger(a) || !Number.isInteger(b)) {
    throw new Error('Parameters in function gcd must be integer numbers');
  }

  var r;
  while (b != 0) {
    r = a % b;

majido

border: yes
height: 600
scrolling: yes
license: mit

majido

A brief history of scroll snapping specification and releases by various browsers.

Summary

As of August 2018: Edge (IE) and Firefox ship the old deprecated spec, Safari and Chrome (starting from v69) ship the current CR spec.

Additional Details

|Date | Status | Specification | Model | Browsers | Features | Notes | Link|

majido

class OverflowPropagationElement extends HTMLElement {
  createdCallback() {
    // See design doc for details of these experimental APIs: https://docs.google.com/document/d/1VnvAqeWFG9JFZfgG5evBqrLGDZYRE5w6G5jEDORekPY/edit
    this.distributeScrollIntent = function(scrollIntent) {
      if (scrollIntent.deltaY <= 0) {
        if (this.getComputedValue('overflow-propagation-up') == 'normal') {
          // let children scroll first and then we scroll if any delta remaining
          scrollIntent.distributeToScrollChainDescendant();
          this.applyScrollIntent(scrollState);