How to use the gsap.Power4.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 Jeremboo / scribble-lab / scribbles / 36daysoftype2019 / l / app.js View on Github external
loader.load(letterL, obj => {
    const l = new L(obj.children[0].geometry);
    l.rotation.y = -Math.PI * 0.1;
    webgl.add(l);

    const tm = new TimelineMax({
    });
    tm.fromTo(l.position, 2, { y : -0.5, }, { y : 0.15, ease : Power4.easeOut });
    tm.fromTo(l.scale, 2, { x : 0.0001, y : 0.0001, z : 0.0001, }, { x : 1, y : 1, z : 1, ease : Power4.easeOut }, 0);
    tm.add(() => {
      l.timeline.play();
    }, '-=0.5');
	}, xhr => {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
github johnpolacek / design-system-playground / src / components / playground / Welcome.js View on Github external
z: getRandomPos(100),
              opacity: 0,
              rotation: getRandomPos(720),
              rotationX: getRandomPos(360),
              rotationY: getRandomPos(360),
            },
            x: 0,
            y: 0,
            z: 0,
            rotation: 0,
            rotationX: 0,
            rotationY: 0,
            opacity: 1,
            delay: 0.5 + Math.random() * 0.5,
            immediateRender: true,
            ease: Power4.easeOut,
          })

          return (
            <span style="{{">
              {letter}
            </span>
          )
        })}
github wexond / desktop / src / defaults / tab-animations.ts View on Github external
import { Power4 } from 'gsap';

export const tabAnimations = {
  backgroundColor: {
    duration: 0.2,
  },
  left: {
    duration: 0.3,
    easing: Power4.easeOut,
  },
  width: {
    duration: 0.3,
    easing: Power4.easeOut,
  },
};
github wexond / desktop / src / defaults / tab-animations.ts View on Github external
import { Power4 } from 'gsap';

export const tabAnimations = {
  backgroundColor: {
    duration: 0.2,
  },
  left: {
    duration: 0.3,
    easing: Power4.easeOut,
  },
  width: {
    duration: 0.3,
    easing: Power4.easeOut,
  },
};
github rezozero / starting-blocks / examples / src / js / blocks / InViewBlock.js View on Github external
onScreen (entry) {
        TweenMax.to(this.rootElement, 1.5, {
            xPercent: 0,
            alpha: 1,
            delay: 0.15,
            ease: Power4.easeOut
        })
    }
github bigfanjs / react-explode / src / Explosion1.js View on Github external
explode() {
        const { size, repeat, delay, repeatDelay } = this.state;
        const ease = Power4.easeOut;
        const angle = Math.PI / 8;
        const radius = size * this.radius / 100;
        const durations = this.durations;
        const { onComplete, onStart, onRepeat } = this.props;
        const center = size / 2;
        const timelines = [];

        this.timeline = new TimelineMax({
            repeat, delay, repeatDelay, onComplete, onStart, onRepeat
        });

        for (let i = 0; i &lt; this.count; i++) {
            const x = center + radius * Math.cos(i * angle);
            const y = center + radius * Math.sin(i * angle);
            const target = this.lines[i];
            const start = { x2: x, y2: y };
github ramsaylanier / WordExpress / app / components / pages / PageAnimations.js View on Github external
import {Power2, Power4} from 'gsap';

const PageAnimations = {
  defaults: {
    duration: 0.5,
    properties: {
      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
  }
};
github bigfanjs / react-explode / src / Explosion5.js View on Github external
explode = () => {
        const ease = Power4.easeOut;
        const { size, delay, repeat, repeatDelay } = this.state;
        const { onStart, onComplete, onRepeat } = this.props;
        const center = size / 2;
        const sizes = [
            size * 0.58,
            size * 0.3,
            size * 0.3,
            size * 0.1,
            size * 0.1
        ];
        const halfs = [sizes[0] / 2, sizes[1] / 2, sizes[3] / 2];
        const front = center - halfs[0];
        const back = center + halfs[0];
        const positions = {
            start: [
                { x: center, y: center },
github ramsaylanier / WordExpress / app / components / posts / PostExcerpt.js View on Github external
componentDidMount() {
    const excerpt = this._excerpt
    const { index } = this.props

    TweenMax.fromTo(excerpt, 1, {
      opacity: 0,
      x: 20
    }, {
      opacity: 1,
      x: 0,
      ease: Power4.easeOut,
      delay: index * 0.1
    })
  }
github bigfanjs / react-explode / src / Explosion6.js View on Github external
animateShape = () =&gt; {
        const ease = Power4.easeOut;
        const size = this.props.size;
        const left = (size * this.left) / 100;
        const sliced = (size * this.sliced) / 100;
        const timelines = [];

        for (let i = 0; i &lt; this.paths.length; i++) {
            const path = this.paths[i];
            const percent = ((sliced * 100) / (size - (left * 2))) / 2;
            const transformOrigin = `${50 + percent}% 50%`;
            const degree = i % 2 == 0 ? (this.degree + this.ratio) : -(this.degree - this.ratio);
            const rotation = degree * ((i + 1) / 4);

            const timeline = new TimelineMax();

            timeline.from(path, 1.5, { scale: 0, transformOrigin, ease });
            timeline.to(path, 0.9, { rotation, ease }, "-=1.5");

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 10 months ago

Package Health Score

74 / 100
Full package analysis