How to use the gsap.Power2.easeOut function in gsap

To help you get started, we’ve selected a few gsap 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 wexond / desktop / src / shared / constants / app / design.ts View on Github external
import { Power2 } from 'gsap';

// Toolbar
export const TOOLBAR_HEIGHT = 40;
export const TOOLBAR_BUTTON_WIDTH = 36;

// Tabs
export const TAB_MAX_WIDTH = 200;
export const TAB_MIN_WIDTH = 72;
export const TAB_PINNED_WIDTH = 32;
export const TAB_ANIMATION_DURATION = 0.3;
export const TAB_ANIMATION_EASING = Power2.easeOut;
export const TABS_PADDING = 2;

// Widths
export const WINDOWS_BUTTON_WIDTH = 45;
export const MENU_WIDTH = 300;
export const MENU_SPACE = 96;
export const MENU_CONTENT_MAX_WIDTH = 640;

// Workspaces
export const WORKSPACE_FOLDER_SIZE = 96;
export const WORKSPACE_ICON_SIZE = 16;
export const WORKSPACE_MAX_ICONS_COUNT = 9;

// Address bar
export const ADDRESS_BAR_HEIGHT = 30;
github EvanBacon / Expo-Pillar-Valley / client / src / Game / engine / entities / PlayerBall.js View on Github external
landed = (perfection) => {
    if (!Settings.circleEnabled) return;

    this.circle.visible = true;

    const duration = 0.7;
    const scale = 5 + 15 * perfection; // randomRange(10, 20);

    TweenMax.to(this.circle.scale, duration, {
      x: scale,
      y: scale,
      ease: Cubic.easeOut,
    });

    TweenMax.to(this.circle, duration, {
      alpha: 0,
      ease: Cubic.easeOut,
      onComplete: this.resetCircle,
    });
  };
}
github qusly / qusly / src / renderer / app / constants / tabs.ts View on Github external
import { Power2 } from 'gsap';

// import { TabOptions } from '../models';

export const defaultTabOptions: any = { // TabOptions
  active: true,
};

export const TAB_MAX_WIDTH = 200;
export const TAB_MIN_WIDTH = 72;
export const TAB_PINNED_WIDTH = 32;
export const TAB_ANIMATION_DURATION = 0.3;
export const TAB_ANIMATION_EASING = Power2.easeOut;
export const TABS_PADDING = 0;
export const ADD_TAB_MARGIN_LEFT = 2;
github dot-browser / desktop / src / renderer / views / app / constants / tabs.ts View on Github external
process.env.ENV === 'dev'
    ? 'http://localhost:8080/newtab.html'
    : 'wexond://newtab';*/

export const NEWTAB_URL = 'https://google.com';

export const defaultTabOptions: chrome.tabs.CreateProperties = {
  url: NEWTAB_URL,
  active: true,
};

export const TAB_MAX_WIDTH = 200;
export const TAB_MIN_WIDTH = 72;
export const TAB_PINNED_WIDTH = 32;
export const TAB_ANIMATION_DURATION = 0.3;
export const TAB_ANIMATION_EASING = Power2.easeOut;
export const TABS_PADDING = 2;
github redacademy / star-wars-crawl-greensock / src / App.js View on Github external
const tl = new TimelineLite();

    tl
      .to(this.intro.current, 4.5, { opacity: 1, delay: 1 })
      .to(this.intro.current, 1.5, {
        opacity: 0,
        onComplete: () => {
          this.audio.current.play();
        }
      })
      .set(this.logo.current, {
        opacity: 1,
        scale: 2.75,
        delay: 0.5
      })
      .to(this.logo.current, 8, { scale: 0.05, ease: Power2.easeOut })
      .to(this.logo.current, 1.5, { opacity: 0 }, "-=1.5")
      .to(this.content.current, 200, { top: "-170%" });
  }
github sentialx / multrin / src / renderer / views / app / constants / tabs.ts View on Github external
import { Power2 } from 'gsap';

export const TAB_MAX_WIDTH = 200;
export const TAB_MIN_WIDTH = 72;
export const TAB_PINNED_WIDTH = 32;
export const TAB_ANIMATION_DURATION = 0.15;
export const TAB_ANIMATION_EASING = Power2.easeOut;
export const TABS_PADDING = 0;
github codesandbox / codesandbox-client / packages / homepage / src / screens / home / CycleFeature / index.js View on Github external
)
      .to(
        '#main-cube',
        0.6,
        {
          y: '+=30',
          ease: Power2.easeIn,
        },
        '-=1.2'
      )
      .to(
        '#main-cube',
        0.6,
        {
          y: 40,
          ease: Power2.easeOut,
        },
        '-=0.6'
      )
      .to(
        '#addition-cube',
        0.2,
        {
          y: -40,
        },
        '-=0.2'
      )
      .to('.main-cube-side', 0.7, {
        backgroundColor: Theme.secondary.clearer(0.2)(),
        boxShadow: `0px 0px 150px ${Theme.secondary()}`,
        ease: Power2.easeInOut,
      })
github ftgibran / vue-api-request / example / main.js View on Github external
VueApiRequest.addEffect('blur', (el) => {
  el.style.filter = 'blur(20px)'
  TweenLite.to(el, 1, {
    filter: 'blur(0)',
    ease: Power2.easeOut
  })
})
github ramsaylanier / WordExpress / app / components / pages / PageAnimations.js View on Github external
opacity: 1,
      ease: Power4.easeOut
    }
  }
};

PageAnimations.animateIn = {
  duration: PageAnimations.defaults.duration,
  properties: PageAnimations.defaults.properties
};

PageAnimations.animateOut = {
  duration: PageAnimations.defaults.duration,
  properties: {
    opacity: 0,
    ease: Power2.easeOut
  }
};

export default PageAnimations;
github madebywild / konterball / src / javascripts / scene.js View on Github external
ballHitAnimation() {
    if (!(this.hitTween && this.hitTween.isActive()) && this.hitAvailable) {
      this.hitAvailable = false;
      this.hitTween = new TimelineMax({
        onComplete: () => {this.hitAvailable = true;},
      });
      this.lastHitPosition = this.ball.position.clone();
      this.lastHitPosition.y = Math.max(this.lastHitPosition.y, this.config.tableHeight + 0.2);
      this.hitTween.to(this, 0.05, {
        paddleInterpolationAlpha: 1,
        ease: Power2.easeIn,
      });
      this.hitTween.to(this, 0.4, {
        ease: Power2.easeOut,
        paddleInterpolationAlpha: 0,
      });
    }
  }

gsap

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

Standard 'no charge' license:…
Latest version published 4 months ago

Package Health Score

69 / 100
Full package analysis