How to use the popmotion.chain 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 lennerd / git-for-beginners / src / models / chapters / gitInATeamChapter.js View on Github external
action(({ complete }) => {
            chain(
              this.checkoutMaster,
              popmotionAction(({ complete }) => {
                console.log('commit create without reset');
                this.vis.createCommit(null, false);
                complete();
              }),
              this.checkoutNewFeature,
            ).start({ complete });
          }),
        ),
github mattermost / mattermost-webapp / components / widgets / menu / menu_wrapper_animation.tsx View on Github external
private onExiting = (node: HTMLElement) => {
        const nodeStyler = styler(node);
        chain(
            tween({from: {opacity: 1}, to: {opacity: 0}, duration: ANIMATION_DURATION}),
            action(({update, complete}) => {
                update({display: 'none'});
                complete();
            }),
        ).start(nodeStyler.set);
    }
github Popmotion / popmotion / site / components / layout / AnimatedLogo.js View on Github external
const pathDom = document.getElementById(ANIMATED_LOGO);
    const pathRenderer = svgPath(pathDom);
    const pathSvgRenderer = svg(pathDom);
    const containerRenderer = css(document.getElementById(SVG_ID));

    pathRenderer.set({
      length: 0,
      spacing: 100,
      offset: 0
    });

    pathSvgRenderer.set({
      strokeOpacity: 1
    });

    this.action = chain([
      tween({
        to: 15,
        duration: 800,
        ease: easing.easeIn,
        onUpdate: (v) => pathRenderer.set('length', v)
      }),
      parallel([
        tween({
          onUpdate: (v) => {
            pathSvgRenderer.set({
              fillOpacity: v,
              strokeOpacity: 1 - v
            });
          }
        }),
        physics({
github Popmotion / popmotion / site / templates / homepage / LavaLampHeader.js View on Github external
to: nextColor,
          duration: COLOR_SEGMENT_DURATION,
          ease: easing.linear,
          i
        }),
        bottom: colorTween({
          from: burnColor,
          to: nextBurnColor,
          duration: COLOR_SEGMENT_DURATION,
          ease: easing.linear,
          i
        })
      }).output(setBackgroundGradient(i));
    });

    this.hueChange = chain(colorCycle).start();
  }
github mattermost / mattermost-webapp / components / widgets / menu / menu_wrapper_animation.tsx View on Github external
private onEntering = (node: HTMLElement, isAppearing: boolean) => {
        const nodeStyler = styler(node);
        chain(
            action(({update, complete}) => {
                update({display: 'block'});
                complete();
            }),
            tween({from: {opacity: 0}, to: {opacity: 1}, duration: ANIMATION_DURATION}),
        ).start(nodeStyler.set);
    }