How to use the stylefire/css function in stylefire

To help you get started, we’ve selected a few stylefire examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github brunnolou / react-morph / src / bck_Morph.jsx View on Github external
easing: optEasing = x => x,
        ...options
      } = {},
    } = this.elementFrom[key];
    const { element: target } = this.elementTo[key];

    const originalRect = getBox(original, { getMargins });
    const targetRect = getBox(target, { getMargins });
    const originalCloneContainer = document.createElement('div');
    const originalClone = original.cloneNode(true);

    originalCloneContainer.appendChild(originalClone);

    const originalStyler = css(original);
    const cloneStyler = css(originalCloneContainer);
    const targetStyler = css(target);

    cloneStyler.set({
      position: 'absolute',
      transformOrigin: 'top left',
      pointerEvents: 'none',
      ...originalRect,
      ...options,
      zIndex,
    });
    targetStyler.set({
      'transform-origin': 'top left',
      visibility: 'visible',
    });

    this.props.portalElement.appendChild(originalCloneContainer);
    this.elementsCloned = [...this.elementsCloned, originalCloneContainer];
github brunnolou / react-morph / src / bck_Morph.jsx View on Github external
getMargins = true,
        easing: optEasing = x => x,
        ...options
      } = {},
    } = this.elementFrom[key];
    const { element: target } = this.elementTo[key];

    const originalRect = getBox(original, { getMargins });
    const targetRect = getBox(target, { getMargins });
    const originalCloneContainer = document.createElement('div');
    const originalClone = original.cloneNode(true);

    originalCloneContainer.appendChild(originalClone);

    const originalStyler = css(original);
    const cloneStyler = css(originalCloneContainer);
    const targetStyler = css(target);

    cloneStyler.set({
      position: 'absolute',
      transformOrigin: 'top left',
      pointerEvents: 'none',
      ...originalRect,
      ...options,
      zIndex,
    });
    targetStyler.set({
      'transform-origin': 'top left',
      visibility: 'visible',
    });

    this.props.portalElement.appendChild(originalCloneContainer);
github brunnolou / react-morph / src / bck_Morph.jsx View on Github external
const fadeInTween = ({ element, options = {} }) => {
  const styler = css(element);
  return keyframes({
    values: [{ opacity: 0 }, { opacity: 1 }],
    easings: linear,
    times: [0.8, 1],
    ...options,
  })
    .start(style => {
      const node = element;

      styler.set(style);

      if (style.opacity === 1) node.style.pointerEvents = 'all';
    })
    .pause();
};
github brunnolou / react-morph / src / bck_Morph.jsx View on Github external
zIndex,
        getMargins = true,
        easing: optEasing = x => x,
        ...options
      } = {},
    } = this.elementFrom[key];
    const { element: target } = this.elementTo[key];

    const originalRect = getBox(original, { getMargins });
    const targetRect = getBox(target, { getMargins });
    const originalCloneContainer = document.createElement('div');
    const originalClone = original.cloneNode(true);

    originalCloneContainer.appendChild(originalClone);

    const originalStyler = css(original);
    const cloneStyler = css(originalCloneContainer);
    const targetStyler = css(target);

    cloneStyler.set({
      position: 'absolute',
      transformOrigin: 'top left',
      pointerEvents: 'none',
      ...originalRect,
      ...options,
      zIndex,
    });
    targetStyler.set({
      'transform-origin': 'top left',
      visibility: 'visible',
    });

stylefire

Performant, simplified stylers for CSS, SVG, path and DOM scroll.

MIT
Latest version published 4 years ago

Package Health Score

64 / 100
Full package analysis