How to use the popmotion.easing.easeOut 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 digirati-labs / hyperion / packages / atlas / src / controller / popmotion-controller.ts View on Github external
)
    );
    // Need to update our observables, for pop-motion
    if (currentZoom) {
      currentZoom.stop();
    }
    currentZoom = tween({
      from: fromPos,
      to: Object.create({
        x: newPoints[1],
        y: newPoints[2],
        width: newPoints[3] - newPoints[1],
        height: newPoints[4] - newPoints[2],
      }),
      duration: zoomDuration,
      ease: stream ? easing.easeOut : easing.easeInOut,
    }).start(viewer);
  }
github GSS-FED / vital-ui-kit-react / packages / list / src / ListItem.tsx View on Github external
startAnimation = () => {
    const stylerBall = styler(this.child);
    // Animation after state change
    if (!this.state.open) {
      this.child.style.display = '';
    }
    tween({
      from: { height: this.state.open ? this.child.clientHeight : 0 },
      to: { height: this.state.open ? 0 : this.child.clientHeight },
      duration: 200,
      ease: this.state.open ? easing.easeIn : easing.easeOut,
    }).start({
      update: stylerBall.set,
      complete: () => {
        this.setState(
          prevState => ({
            open: !prevState.open,
          }),
          () => {
            setTimeout(() => {
              if (!this.state.open) {
                this.child.style.display = 'none';
              }
              this.child.style.height = '';
            }, 50);
          },
        );
github Popmotion / popmotion / packages / site / pages / index.js View on Github external
scaleY: ({ from, to }) =>
          keyframes({
            values: [from, 1.2, to],
            easings: [easing.easeOut, dropEasing],
            times: [0, 0.3, 1],
            duration: 500
          }),
        opacity: props => tween({ ...props, duration: 500 * 0.6 })
github phmatray / openjam / src / views / not-found / KawaiiAnimation.js View on Github external
to: { scaleY: 0.3 },
      duration: 300,
      flip: 1,
    });

    const tongueDisappear = tween({
      from: { scaleY: 1 },
      to: { scaleY: 0 },
      duration: 300,
      flip: 1,
    });

    tween({
      from: { y: 10 },
      to: { y: 20 },
      easings: easing.easeOut,
      duration: 1500,
      yoyo: Infinity,
    }).start(body.set);

    const eyeLeftAction = action(({ complete }) => {
      showEye.start({
        update: eyeLeft.set,
        complete: () => {
          complete();
          setInterval(() => blinkEye.start({ update: eyeLeft.set }), 2000);
        },
      });
    });

    const eyeRightAction = action(({ complete }) => {
      showEye.start({
github aholachek / react-stripe-menu / src / Flipper / index.js View on Github external
class Flipper extends Component {
  static propTypes = {
    flipKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.bool
    ]),
    children: PropTypes.node.isRequired,
    duration: PropTypes.number,
    ease: PropTypes.func
  }

  static defaultProps = {
    duration: 250,
    ease: easing.easeOut
  }

  componentDidMount() {
    this.flipping = new Flipping({
      parent: this.el,
      onFlip: this.onFlip
    })
  }

  onFlip = flippedElements => {
    animateMove({
      flippedElements,
      duration: this.props.duration,
      ease: this.props.ease
    })
  }
github Popmotion / popmotion / packages / popmotion-pose / dist / popmotion-pose.es.js View on Github external
return { raw: raw };
};
var createValue = function (init) {
    var type = valueTypeTests.find(testValueType(init));
    var raw = value(type === number ? type.parse(init) : init);
    return { raw: raw, type: type };
};
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,
github Popmotion / popmotion / packages / site / templates / Popmotion / LiveExamples / Timeline.js View on Github external
okModal = () => {
    this.animation = timeline([
      {
        track: 'modal',
        duration: 200,
        from: { y: 0, opacity: 1 },
        to: { y: -200, opacity: 0 },
        ease: { y: easing.easeOut, opacity: easing.linear }
      },
      '-100',
      { track: 'shade', from: 1, to: 0, ease: easing.linear, duration: 300 }
    ]).start({
      update: this.setStylers,
      complete: this.closeModal
    });
  };
github HuijiFE / void-ui / src / controls / navigation / tabs / VdTabs.tsx View on Github external
from: -100 * oldIndex,
        to: -100 * oldIndex - direction * 50,
        ease: easing.easeIn,
        duration,
      }).start({
        update: (v: number) => oldPane.styler.set('x', `${v}%`),
        complete: () => {
          this.changing = false;
          oldPane.styler.set('x', 0);
        },
      });

      tween({
        from: -100 * newIndex + direction * 50,
        to: -100 * newIndex,
        ease: easing.easeOut,
        duration,
      }).start({
        update: (v: number) => newPane.styler.set('x', `${v}%`),
      });
    }
  }