How to use the gsap.Expo.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 roadiz / roadiz / themes / Rozier / Resources / app / Lazyload.js View on Github external
this.nodeEditSource = new NodeEditSource()
        this.tagEdit = new TagEdit()
        this.nodeTree = new NodeTree()

        // Codemirror
        this.initMarkdownEditors()
        this.initJsonEditors()
        this.initCssEditors()
        this.initYamlEditors()
        this.initFilterBars()
        this.initColorPickers()
        this.initCollectionsForms()

        // Animate actions menu
        if ($('.actions-menu').length) {
            TweenLite.to('.actions-menu', 0.5, {right: 0, delay: 0.4, ease: Expo.easeOut})
        }

        window.Rozier.initNestables()
        window.Rozier.bindMainTrees()
        window.Rozier.nodeStatuses = new NodeStatuses()

        // Switch checkboxes
        this.initBootstrapSwitches()

        window.Rozier.getMessages()

        if (typeof window.Rozier.importRoutes !== 'undefined' &&
            window.Rozier.importRoutes !== null) {
            window.Rozier.import = new Import(window.Rozier.importRoutes)
            window.Rozier.importRoutes = null
        }
github roadiz / roadiz / themes / Rozier / Resources / app / RozierMobile.js View on Github external
openSearch () {
        // Close panel if open
        this.closeMenu()
        this.closeTree()
        this.closeUser()

        // Translate search panel
        TweenLite.to(this.$searchPanel, 0.6, {x: 0, ease: Expo.easeOut})

        this.$mainContentOverlay[0].style.display = 'block'
        TweenLite.to(this.$mainContentOverlay, 0.6, {opacity: 0.5, ease: Expo.easeOut})

        // Add active class
        this.$searchButton.addClass('active')
        this.searchOpen = true
    }
github EvanBacon / Expo-Pillar-Valley / client / src / Game / Game.js View on Github external
startGame = () => {
    if (this.state === GameStates.playing) {
      return;
    }
    this._unsubscribe();
    TweenMax.to(this.titleGroup.position, 1.0, {
      y: -1100,
      ease: ExpoEase.easeOut,
      // delay: 0.2,
      onComplete: async () => {
        await this.loadGame();
        this.setGameState(GameStates.playing);
      },
    });
  };
github larsvanbraam / vue-transition-component / example / src / component / DummyScrollComponentA / DummyScrollComponentATransitionController.ts View on Github external
id: string,
  ): void {
    if(id) {
      console.log(id);
    }
    timeline.fromTo(
      parent.$el,
      0.5,
      {
        autoAlpha: 0,
        xPercent: 100,
      },
      {
        autoAlpha: 1,
        xPercent: 0,
        ease: Expo.easeOut,
      },
    );
  }
github larsvanbraam / vue-transition-component / example / src / component / DummyComponentA / DummyComponentATransitionController.ts View on Github external
protected setupTransitionInTimeline(
    timeline:TimelineMax,
    parent:IAbstractTransitionComponent,
    id:string): void {
    timeline.fromTo(
      this.parentController.$el,
      0.5,
      {
        autoAlpha: 0,
        xPercent: 100,
      },
      {
        autoAlpha: 1,
        xPercent: 0,
        ease: Expo.easeOut,
      },
    );
    timeline.add(this.getTimeline('infoBox'));
  }
github larsvanbraam / vue-transition-component / example / src / component / DummyComponentC / DummyComponentCTransitionController.ts View on Github external
protected setupTransitionInTimeline(
    timeline: TimelineMax,
    parent: IAbstractTransitionComponent,
    id: string): void {
    timeline.fromTo(
      this.parentController.$el,
      0.5,
      {
        autoAlpha: 0,
        xPercent: -100,
      },
      {
        autoAlpha: 1,
        xPercent: 0,
        ease: Expo.easeOut,
      },
    );
  }
github EvanBacon / Expo-Nitro-Roll / Game / Game.js View on Github external
animateGameOver = () => {
    const duration = 0.8;
    TweenLite.to(this.scale, duration, {
      y: 0.0001,
      z: 0.0001,
      ease: ExpoEase.easeOut,
      onComplete: () => {
        this.reset();

        TweenLite.to(this.scale, duration, {
          x: 1,
          y: 1,
          z: 1,
          ease: Linear.easeNone,
        });
      },
    });
  };
github EvanBacon / Expo-Pillar-Valley / client / src / Game / Game.js View on Github external
pillarB.position.z = 55;
      TweenMax.to(pillarB.position, 1.0, {
        y: -530,
        ease: Back.easeOut,
        delay: 0.1,
      });
    }
    const pillarC = await makePillar(Assets.images['BEGIN.png'], 0xedcbbf);
    titleGroup.add(pillarC);

    pillarC.position.y = -1100;
    pillarC.position.x = 30;
    pillarC.position.z = 105;
    TweenMax.to(pillarC.position, 1.0, {
      y: -540,
      ease: ExpoEase.easeOut,
      delay: 0.2,
    });

    const normalizer = new THREE.Object3D();
    normalizer.add(titleGroup);
    this.scene.add(normalizer);

    this.pillars = [pillar, pillarB, pillarC];
    this.titleGroup = normalizer;
  };
github roadiz / roadiz / themes / Rozier / Resources / app / components / custom-form-fields / CustomFormFieldEdit.js View on Github external
closeForm () {
        this.$formIcon[0].className = 'uk-icon-chevron-right'

        TweenLite.to(this.$formCont, 0.4, {
            height: 0,
            ease: Expo.easeOut,
            onComplete: () => {
                this.$formRow.remove()
                this.indexOpen = null
                this.$formFieldCol.addClass('custom-form-field-col')
            }
        })
    }
github roadiz / roadiz / themes / Rozier / Resources / app / components / custom-form-fields / customFormFieldEdit.js View on Github external
setTimeout(function () {
        _this.$formCont = $('.custom-form-field-edit-form-cont')
        _this.formContHeight = _this.$formCont.actual('height')
        _this.$formRow = $('.custom-form-field-edit-form-row')
        _this.$form = $('#edit-custom-form-field-form')
        _this.$formIcon = $(_this.$formFieldRow[_this.indexOpen]).find('.custom-form-field-col-1 i')

        _this.$form.attr('action', url)
        _this.$formIcon[0].className = 'uk-icon-chevron-down'

        _this.$formCont[0].style.height = '0px'
        _this.$formCont[0].style.display = 'block'
        TweenLite.to(_this.$form, 0.6, {height: _this.formContHeight, ease: Expo.easeOut})
        TweenLite.to(_this.$formCont, 0.6, {height: _this.formContHeight, ease: Expo.easeOut})
    }, 200)
}

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