How to Detect Fast Scrolling in Webflow and Trigger an Animation

(function() {
  var style = document.createElement('style');
  style.textContent = '@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }';
  document.head.appendChild(style);
  var lastScroll = 0, lastTime = Date.now(), toastShown = false;
  var THRESHOLD = 80;
  window.addEventListener('scroll', function() {
    var now = Date.now();
    var delta = Math.abs(window.scrollY - lastScroll);
    var timeDiff = now - lastTime || 1;
    var speed = delta / timeDiff * 16;
    if (speed > THRESHOLD && !toastShown) {
      toastShown = true;
      var toast = document.createElement('div');
      toast.textContent = '🚀 Woah, you’re scrolling fast!';
      toast.style.cssText = 'position:fixed;top:24px;right:24px;background:#a78bfa;color:#fff;padding:10px 20px;border-radius:100px;font-size:14px;z-index:9999;animation:slideDown 0.3s ease;';
      document.body.appendChild(toast);
      setTimeout(function() { toast.remove(); toastShown = false; }, 2000);
    }
    lastScroll = window.scrollY;
    lastTime = now;
  });
})();