How to use the popmotion.easing.backOut function in popmotion

To help you get started, we’ve selected a few popmotion 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 freenas / webui / src / app / core / classes / hardware / chassis.ts View on Github external
setTimeout(() =>{
        const updateAlpha = (v) => {
          return item.handle.alpha = v;
        }

        tween({
          from: item.handle.alpha,
          to: item.enabled ? 1 : opacity, 
          duration: duration /*+ 1000*/,
          ease: easing.backOut,
          //flip: Infinity
        }).start({
          update: v => { updateAlpha(v) },
          complete: () => {
            if(index == this.driveTrayObjects.length - 1){
              //this.initialized = true;
              // Let the parent know class is ready.
              this.events.next({name: "Ready"});
            } 
          }
        });
      }, delay)
github Popmotion / popmotion / packages / site / templates / Popmotion / LiveExamples / Timeline.js View on Github external
const tweenUp = (track, duration = 500, yFrom = 100) => ({
  track,
  duration,
  from: { y: yFrom, opacity: 0 },
  to: { y: 0, opacity: 1 },
  ease: { y: easing.backOut, opacity: easing.linear }
});
github Popmotion / popmotion / packages / popmotion-pose / dist / popmotion-pose.es.js View on Github external
};
var addActionDelay = function (delay$$1, transition) {
    if (delay$$1 === void 0) {
        delay$$1 = 0;
    }
    return chain(delay(delay$$1), transition);
};
var animationLookup = /*#__PURE__*/new Map([['tween', tween], ['spring', spring], ['decay', decay], ['keyframes', keyframes], ['physics', physics]]);
var 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;
var easingLookup = /*#__PURE__*/new Map([['easeIn', easeIn], ['easeOut', easeOut], ['easeInOut', easeInOut], ['circIn', circIn], ['circOut', circOut], ['circInOut', circInOut], ['backIn', backIn], ['backOut', backOut], ['backInOut', backInOut], ['anticipate', anticipate]]);
var getAction = function (v, _a, _b) {
    var from = _b.from,
        to = _b.to,
        velocity = _b.velocity;
    var _c = _a.type,
        type = _c === void 0 ? 'tween' : _c,
        ease = _a.ease,
        def = __rest(_a, ["type", "ease"]);
    invariant(animationLookup.has(type), "Invalid transition type '" + type + "'. Valid transition types are: tween, spring, decay, physics and keyframes.");
    if (type === 'tween') {
        var typeOfEase = typeof ease;
        if (typeOfEase !== 'function') {
            if (typeOfEase === 'string') {
github Popmotion / popmotion / playground / plugins / react-pose / index.js View on Github external
transition: ({ from, to }) =>
      tween({ from, to, ease: easing.backOut, duration: 800 })
  },
github Popmotion / popmotion / packages / site / templates / Popmotion / LiveExamples / Tween.js View on Github external
startAnimation() {
    this.animation = tween({
      to: { x: 300, rotate: 180 },
      duration: 1200,
      ease: easing.backOut,
      flip: Infinity
    }).start(v => this.boxStyler.set(v));
  }
github element-motion / element-motion / packages / docs / src / 3-advanced-usage / PopmotionMoveRight.tsx View on Github external
animate: (_, onFinish) => {
            tween({ from: 0, to: { x: 300 }, duration: 1000, ease: easing.backOut }).start({
              complete: () => onFinish(),
              update: elementStyler.current.set,
            });
          },
        },