How to use the @popmotion/easing.linear function in @popmotion/easing

To help you get started, we’ve selected a few @popmotion/easing 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 / lib / useMorph.js View on Github external
var react_1 = require("react");
var easing_1 = require("@popmotion/easing");
var morphTransition_1 = require("./morphTransition");
var util_1 = require("./util");
var globalAny = global;
var defaultsOptions = {
    keepFrom: false,
    type: 'morph',
    getMargins: false,
    portalElement: globalAny.document && globalAny.document.body,
    spring: {
        damping: 26,
        mass: 1,
        stiffness: 180,
    },
    easings: easing_1.linear,
    isReversed: false,
    withMethods: false,
};
function useMorph(opts) {
    if (opts === void 0) { opts = defaultsOptions; }
    var options = __assign({}, defaultsOptions, opts);
    var getMargins = options.getMargins, keepFrom = options.keepFrom, _a = options.spring, damping = _a.damping, mass = _a.mass, stiffness = _a.stiffness, isReversed = options.isReversed;
    var backAnimationRef = react_1.useRef();
    var prevToRef = react_1.useRef();
    var prevToRectRef = react_1.useRef();
    var prevSpringRef = react_1.useRef();
    var cleanupFromRef = react_1.useRef();
    var setProgressRef = react_1.useRef();
    var isAnimating = false;
    var cleanup;
    function resize() {
github Popmotion / popmotion / packages / popmotion-pose / src / inc / lookups.ts View on Github external
Action
} from 'popmotion';
import * as easing from '@popmotion/easing';

export const animationLookup: {
  [key: string]: (props: { [key: string]: any }) => Action;
} = {
  tween,
  spring,
  decay,
  keyframes,
  physics
};

export const easingLookup = {
  linear: easing.linear,
  easeIn: easing.easeIn,
  easeOut: easing.easeOut,
  easeInOut: easing.easeInOut,
  circIn: easing.circIn,
  circOut: easing.circOut,
  circInOut: easing.circInOut,
  backIn: easing.backIn,
  backOut: easing.backOut,
  backInOut: easing.backInOut,
  anticipate: easing.anticipate,
};
github brunnolou / react-morph / lib / useFade.js View on Github external
var util_1 = require("./util");
var easing_1 = require("@popmotion/easing");
var popcorn_1 = require("@popmotion/popcorn");
var globalAny = global;
var defaultsOptions = {
    keepFrom: false,
    type: 'morph',
    getMargins: false,
    portalElement: globalAny.document && globalAny.document.body,
    spring: {
        damping: 26,
        mass: 1,
        stiffness: 180,
        overshootClamping: true,
    },
    easings: easing_1.linear,
    delaysRatio: 0.1,
    isInitial: false,
};
function useFade(opts) {
    if (opts === void 0) { opts = defaultsOptions; }
    var options = __assign({}, defaultsOptions, opts);
    var getMargins = options.getMargins, isInitial = options.isInitial, delaysRatio = options.delaysRatio;
    var prevNodeRef = react_1.useRef();
    var cloneContainerRef = react_1.useRef();
    var isMountedRef = react_1.useRef();
    var cleanup = function () {
        if (!cloneContainerRef.current)
            return;
        prevNodeRef.current.style.visibility = null;
        options.portalElement.removeChild(cloneContainerRef.current);
        cloneContainerRef.current = null;