@storybook/design-system/dist/components/shared/animation.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.inlineGlow = exports.shake = exports.jiggle = exports["float"] = exports.glow = exports.rotate360 = exports.easing = void 0;

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _theming = require("@storybook/theming");

var _styles = require("./styles");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var easing = {
  rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)'
};
exports.easing = easing;
var rotate360 = (0, _theming.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n"])));
exports.rotate360 = rotate360;
var glow = (0, _theming.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  0%, 100% { opacity: 1; }\n  50% { opacity: .4; }\n"])));
exports.glow = glow;

var _float = (0, _theming.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  0% { transform: translateY(1px); }\n  25% { transform: translateY(0px); }\n  50% { transform: translateY(-3px); }\n  100% { transform: translateY(1px); }\n"])));

exports["float"] = _float;
var jiggle = (0, _theming.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  0%, 100% { transform:translate3d(0,0,0); }\n  12.5%, 62.5% { transform:translate3d(-4px,0,0); }\n  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }\n"])));
exports.jiggle = jiggle;
var shake = (0, _theming.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  0% { transform:rotate(-3deg) }\n  1.68421% { transform:rotate(3deg) }\n  2.10526% { transform:rotate(6deg) }\n  3.78947% { transform:rotate(-6deg) }\n  4.21053% { transform:rotate(-6deg) }\n  5.89474% { transform:rotate(6deg) }\n  6.31579% { transform:rotate(6deg) }\n  8% { transform:rotate(-6deg) }\n  8.42105% { transform:rotate(-6deg) }\n  10.10526% { transform:rotate(6deg) }\n  10.52632% { transform:rotate(6deg) }\n  12.21053% { transform:rotate(-6deg) }\n  12.63158% { transform:rotate(-6deg) }\n  14.31579% { transform:rotate(6deg) }\n  15.78947% { transform:rotate(0deg) }\n  100% { transform:rotate(0deg) }\n"])));
exports.shake = shake;
var inlineGlow = /*#__PURE__*/(0, _theming.css)("animation:", glow, " 1.5s ease-in-out infinite;background:", _styles.color.tr5, ";color:transparent;cursor:progress;" + (process.env.NODE_ENV === "production" ? "" : ";label:inlineGlow;"));
exports.inlineGlow = inlineGlow;