How to use the gsap/TweenMax.TweenLite.set 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 AliaElKattan / survivalofthebestfit / game-source / public / game / components / interface / ml / news-feed / news-feed.js View on Github external
show() {
        TweenLite.set('#news-feed', {y: -50}); // set the Y transform before animating it
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        TweenLite.to('#news-feed', 0.3, {y: 0});
    }
github AliaElKattan / survivalofthebestfit / game-source / public / game / components / interface / ml / person-tooltip / person-tooltip.js View on Github external
show() {
        TweenLite.set('#js-person-tooltip', {y: 5, opacity: 0});
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        TweenLite.to('#js-person-tooltip', 0.2, {y: 0, opacity: 1, ease: Power1.easeInOut});
        this.isActive = true;
    }
github AliaElKattan / survivalofthebestfit / game-source / public / game / components / interface / ml / dataset-view / dataset-view.js View on Github external
show() {
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        TweenLite.set('#dataset-overlay', {y: 50, opacity: 0});
        TweenLite.to('#dataset-overlay', 0.3, {y: 0, opacity: 1, ease: Power1.easeOut});
    }
github AliaElKattan / survivalofthebestfit / game-source / public / game / components / interface / ui-resume / ui-resume.js View on Github external
show() {
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        if (this.type === 'ml') {
            TweenLite.set('#js-resume', {x: 20, opacity: 0});
            TweenLite.to('#js-resume', 0.3, {x: 0, opacity: 1, ease: Power1.easeInOut});
        }
    }
github AliaElKattan / survivalofthebestfit / game-source / public / game / components / interface / yes-no / yes-no.js View on Github external
show() {
        this.$el.css({
            'top': `${spotlight.y - 150}px`,
            'left': `${spotlight.x + 10}px`,
        });
        TweenLite.set(this.$id, {y: 5, xPercent: -50, opacity: 0});
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        TweenLite.to(this.$id, 0.2, {y: 0, opacity: 1, ease: Power1.easeInOut});
    }
github space10-community / conversational-form / landingpage / src / main.js View on Github external
if (
    window.innerHeight < 780
  ) {
    TweenLite.set(
      headlineEl,
      {
        css: {
          scale: 0.68,
          'margin-top': 60,
          'margin-bottom': 60,
        },
      },
    );
  }

  TweenLite.set(headerEl, { y: 10 });
  TweenLite.to(
    headerEl,
    animTime / 2,
    {
      opacity: 1,
      y: 0,
    },
  );

  TweenLite.set(headlineEl, { y: 20 });
  TweenLite.to(
    headlineEl,
    animTime,
    {
      opacity: 1,
      y: 0,
github AliaElKattan / survivalofthebestfit / game / public / components / interface / ml / endgame-overlay / endgame-overlay.js View on Github external
constructor(options) {
        this.$el = $('#js-endgame-overlay');
        this.$el.removeClass(CLASSES.IS_INACTIVE);
        TweenLite.set('#js-endgame-overlay', {y: 50, opacity: 0});
        TweenLite.to('#js-endgame-overlay', 0.3, {y: 0, opacity: 1, ease: Power1.easeOut});
    }

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