How to use the gsap.TweenMax.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 madebywild / konterball / src / javascripts / app.js View on Github external
TweenMax.set('.checkmark', {visibility: 'hidden'}, 0.3);
    const tl = new TimelineMax({repeat: -1, repeatDelay: 1, paused: true});
    tl.to('.phone', 0.5, {
      ease: Back.easeInOut.config(1),
      rotation: 180,
    });
    tl.set('.x', {visibility: 'hidden'}, 0.3);
    tl.set('.checkmark', {visibility: 'visible'}, 0.3);
    tl.to('.phone', 0.5, {
      ease: Back.easeInOut.config(1),
      rotation: 90,
    }, '+=1');
    tl.set('.x', {visibility: 'visible'}, '-=0.2');
    tl.set('.checkmark', {visibility: 'hidden'}, '-=0.2');
    if ($(window).width() < $(window).height()) {
      TweenMax.set('.rotate-phone-screen', {
        visibility: 'visible',
      });
      tl.play();
    } else if (!this.startedLoading) {
      this.startLoading();
    }
    $(window).on('orientationchange', () => {
      setTimeout(() => {
        if ($(window).width() > $(window).height()) {
          TweenMax.to('.rotate-phone-screen', 0.3, {
            autoAlpha: 0,
          });
          if (!this.startedLoading) {
            this.startLoading();
          }
          tl.pause();
github BiserStoilov / scroll-animations / src / index.js View on Github external
position = status.offset.y;
            for (let a = 0; a < variables.elements.length; a++) {
                isVisible = variables.scrollBar.isVisible(
                    variables.parentElements[a]
                );
                if (variables.typeAnimation[a] === 'parallax' && isVisible) {
                    variables.elementPos[a] = variables.elements[
                        a
                    ].getBoundingClientRect();
                    variables.elementTop[a] =
                        variables.elementPos[a].top - variables.parentPos.top;
                    variables.realPosition =
                        variables.elementTop[a] -
                        variables.parentPos.height / 2 +
                        variables.elementPos[a].height / 2;
                    TweenMax.set(variables.elements[a], {
                        y: variables.realPosition / variables.speedParallax[a]
                    });
                } else if (
                    variables.typeAnimation[a] === 'aos' &&
                    isVisible &&
                    direction === 'down'
                ) {
                    classManipulate.add(variables.elements[a], 'aos-animate');
                } else if (
                    variables.typeAnimation[a] === 'aos' &&
                    !isVisible &&
                    variables.elements[a].getBoundingClientRect().top > 0
                ) {
                    classManipulate.remove(
                        variables.elements[a],
                        'aos-animate'
github madebywild / konterball / src / javascripts / app.js View on Github external
this.communication.tryConnecting($('#room-code').val().toUpperCase()).then(() => {
          $('#room-form .grey-text').text('game starts');
          $('#room-form #join-room-button').css('visibility', 'hidden');
          TweenMax.set('.opponent-icon > *', {fill: '#fff'});
          loadingTL.kill();
          setTimeout(() => {
            this.viewVRChooserScreen();
          }, 1000);
        }).catch(err => {
          loadingTL.kill();
github madebywild / konterball / src / javascripts / app.js View on Github external
this.enterVRButton.on('exit', () => {
      TweenMax.set([this.scene.renderer, '.mute', 'canvas'], {
        display: 'block',
        visibility: 'visible',
        opacity: 1,
      });
      this.hideFullscreenButton();
      if (this.scene.display) {
        TweenMax.set('.enter-vr', {
          display: 'block',
          opacity: 1,
        });
      }
      if (Util.isMobile()) {
        TweenMax.set('.reset-pose', {
          display: 'block',
          opacity: 1,
        });
      }
    });
  }
github madebywild / konterball / src / javascripts / scene.js View on Github external
this.introPanAnimation().then(() => {
      this.viewport = {
        width: $(this.renderer.domElement).width(),
        height: $(this.renderer.domElement).height(),
      };
      if (Util.isMobile()) {
        TweenMax.set('.reset-pose', {
          display: 'block',
        });
      }
      if (this.manager.isVRCompatible) {
        TweenMax.set('.enter-vr', {
          display: 'block',
        });
      }
      this.paddle.visible = true;
      this.hud.container.visible = true;
      this.setupVRControls();
      if (this.config.mode === MODE.SINGLEPLAYER) {
        this.countdown();
      } else {
        this.paddleOpponent.visible = true;
        this.playerRequestedCountdown = true;
github madebywild / konterball / src / javascripts / app.js View on Github external
checkPhoneOrientation() {
    TweenMax.set('.phone', {rotation: 90});
    TweenMax.set('.checkmark', {visibility: 'hidden'}, 0.3);
    const tl = new TimelineMax({repeat: -1, repeatDelay: 1, paused: true});
    tl.to('.phone', 0.5, {
      ease: Back.easeInOut.config(1),
      rotation: 180,
    });
    tl.set('.x', {visibility: 'hidden'}, 0.3);
    tl.set('.checkmark', {visibility: 'visible'}, 0.3);
    tl.to('.phone', 0.5, {
      ease: Back.easeInOut.config(1),
      rotation: 90,
    }, '+=1');
    tl.set('.x', {visibility: 'visible'}, '-=0.2');
    tl.set('.checkmark', {visibility: 'hidden'}, '-=0.2');
    if ($(window).width() < $(window).height()) {
      TweenMax.set('.rotate-phone-screen', {
        visibility: 'visible',
github sdras / sample-vue-shop / components / AppLoader.vue View on Github external
mounted() {
    TweenMax.set('#platform, #giftcontain, #bag, #cart', {
      visibility: 'visible'
    });
    TweenMax.set('.baghandle', {
      transformOrigin: '20% 50%'
    });

    function gift() {
      var tl = new TimelineMax();

      tl.add('start');
      tl.fromTo(
        '#gift',
        1,
        {
          y: -500
        },
        {
          y: 0,
          ease: Bounce.easeOut
github spring-io / start.spring.io / start-client / src / components / common / share / Overlay.js View on Github external
const onEnter = () => {
    noScroll.on()
    if (theme === 'dark') {
      TweenMax.set(container, { perspective: 600 })
      for (let i = 0; i < SNOW_TOTAL; i += 1) {
        const item = refs[i]
        TweenMax.set(item, {
          x: getRandom(0, windowsUtils.width),
          y: getRandom(-200, -150),
          z: getRandom(-200, 200),
        })
        TweenMax.to(item, getRandom(3, 6.5), {
          y: windowsUtils.height + 100,
          ease: Linear.easeNone,
          repeat: -1,
          delay: -15,
        })
        TweenMax.to(item, getRandom(5, 7), {
          x: '+=100',
          repeat: -1,
github madebywild / konterball / src / javascripts / app.js View on Github external
hideFullscreenButton() {
    if (this.iOS) {
      TweenMax.set('.fullscreen-button', {
        display: 'none',
      });
    }
  }

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