How to use gsap - 10 common examples

let forceAnimation = false;
    if (this.isPlayingShowOrHideLoadingWidgetAnimation) {
      // Note: This happens when more than one of these animations are
      // constructed back to back, before the first has started, or if an
      // animation is killed before it can complete. In these cases we always
      // want to return the full desired animation, not the empty one.
      console.debug('Calling getUpdateStatusWidgetVisibility while '
                    + 'isPlayingShowOrHideLoadingWidgetAnimation = true. ');
      forceAnimation = true;
    }

    // If nothing has changed, return an empty animation.
    if (hide === this.shouldHideStatusWidget && !forceAnimation) {
      console.debug('Returning without update status widget visibility animation.');
      return new TimelineMax({});
    } else {
      console.debug('Getting update status widget visibility animation.');
    }

    this.isPlayingShowOrHideLoadingWidgetAnimation = true;
    const updateStatusWidgetVisibilityAnimation = new TimelineMax({
      onStart: () => {
        this.ngZone.run(() => {
          console.debug('Updating status widget visibility to '
                        + (hide ? 'hidden' : 'visible') + ' from '
                        + (this.shouldHideStatusWidget ? 'hidden' : 'visible'));
          // Disable hiding so animations will show up.
          this.shouldHideStatusWidget = false;
        });
      },
      onComplete: () => {

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
        }

tweenConfettiParticle(id) {
		const minAngle = this.confettiSprites[id].angle - SPREAD / 2;
		const maxAngle = this.confettiSprites[id].angle + SPREAD / 2;
		
		const minVelocity = this.confettiSprites[id].velocity / 4;
		const maxVelocity = this.confettiSprites[id].velocity;

		// Physics Props
		const velocity = loRandom(minVelocity, maxVelocity);
		const angle = loRandom(minAngle, maxAngle);
		const gravity = GRAVITY;
		// const friction = loRandom(0.1, 0.25);
		const friction = loRandom(0.01, 0.05);
		const d = 0;

		TweenMax.to(this.confettiSprites[id], DECAY, {
			physics2D: {
				velocity,
				angle,
				gravity,
				friction,
			},
			d,
			ease: Power4.easeIn,
			onComplete: () => {
				// remove confetti sprite and id
				loPull(this.confettiSpriteIds, id);
				delete this.confettiSprites[id];
			},
		});
	}

const space = (Math.floor(i / this.count) + 1) * diff;

            const linex = this.center + offsetX + (dists[0] - space) * x;
            const liney = this.center + offsetY + (dists[0] - space) * y;

            const start = { x2: linex, y2: liney };
            const end = { x1: linex, y1: liney };

            timeline.to(line, 0.7, { attr: start, ease });
            timeline.to(line, 1.3, { attr: end, ease }, "-=0.7");
            timeline.to(line, 0.5, { opacity: 0 }, "-=0.5");

            tlgroup1.push(timeline);
            if (i < this.count) {
                const timeline = new TimelineMax();

                const square = this.squares[i];
                const circle = this.circles[i];

                // animate square
                timeline.fromTo(square, 1.5, { rotation: i * 35, transformOrigin }, { rotation: "+=360", ease });
                timeline.add("start", "-=1.5");
                timeline.to(square, 1.5, { x: offsetX + dists[1] * x, y: offsetY + dists[1] * y, ease }, "start");
                timeline.from(square, 1.5, { scale: 0, ease }, "start");
                timeline.to(square, 1, { opacity: 0, ease }, "start+=0.8");

                // animate circle
                timeline.to(circle, 1.5, { x: offsetX + dists[2] * x, y: offsetY + dists[2] * y, ease }, "start+=0.3");
                timeline.from(circle, 1.5, { scale: 0, transformOrigin, ease }, "start+=0.3");
                timeline.to(circle, 1.5, { scale: 0, transformOrigin, ease }, "-=0.9");

getStartAnimationsForCircleSquareDiamondWidgetLoading(): TimelineMax {
    const startAnimationsTimeline = new TimelineMax({
      align: 'sequence',
    });

    // Start animations happen in three groups. Group 0 animations before
    // group 1, which animates before group 2. The animations within each
    // group start at the same time.
    const startAnimationsGroup0: Animation[] = [];
    const startAnimationsGroup1: Animation[] = [];
    const startAnimationsGroup2: Animation[] = [];

    // Update visibility of the status widget before starting; it could have
    // disappeared due to certain settings, and in some of these cases it
    // needs to reappear before loading animation begins.
    startAnimationsGroup0.push(
      this.getUpdateStatusWidgetVisibilityAnimation(true));

this.explorer.rotationVelocity = 0.02;

        this.explorer.on("pointerdown", () => {
            this.explorer.rotationVelocity *= -1;
        });

        // Add the explorer to the scene we are building
        this.app.stage.addChild(this.explorer);

        // Listen for frame updates
        this.app.ticker.add(() => {
            // each frame we spin the explorer around a bit
            this.explorer.rotation += this.explorer.rotationVelocity;
        });

        TweenLite.to(this.explorer, 2, {y: this.app.initialHeight / 2});
    }

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
    }

openUser () {
        // Close panel if open
        this.closeMenu()
        this.closeSearch()
        this.closeTree()

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

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

        // Add active class
        this.$userPicture.addClass('active')
        this.userOpen = true
    }

curEmailIndex = value.length;

	// very crude email validation for now to trigger effects
	if (curEmailIndex > 0) {
		if (mouthStatus == "small") {
			mouthStatus = "medium";
			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, shapeIndex: 8, ease: Expo.easeOut });
			TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
			TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
			TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
		}
		if (value.includes("@")) {
			mouthStatus = "large";
			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthLargeBG, ease: Expo.easeOut });
			TweenMax.to(tooth, 1, { x: 3, y: -2, ease: Expo.easeOut });
			TweenMax.to(tongue, 1, { y: 2, ease: Expo.easeOut });
			TweenMax.to([eyeL, eyeR], 1, { scaleX: .65, scaleY: .65, ease: Expo.easeOut, transformOrigin: "center center" });
		} else {
			mouthStatus = "medium";
			TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthMediumBG, ease: Expo.easeOut });
			TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
			TweenMax.to(tongue, 1, { x: 0, y: 1, ease: Expo.easeOut });
			TweenMax.to([eyeL, eyeR], 1, { scaleX: .85, scaleY: .85, ease: Expo.easeOut });
		}
	} else {
		mouthStatus = "small";
		TweenMax.to([mouthBG, mouthOutline, mouthMaskPath], 1, { morphSVG: mouthSmallBG, shapeIndex: 9, ease: Expo.easeOut });
		TweenMax.to(tooth, 1, { x: 0, y: 0, ease: Expo.easeOut });
		TweenMax.to(tongue, 1, { y: 0, ease: Expo.easeOut });
		TweenMax.to([eyeL, eyeR], 1, { scaleX: 1, scaleY: 1, ease: Expo.easeOut });
	}
}

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});
    }