amir hanif amir hanif - 27 days ago 9
CSS Question

Stop a function after certain time

I have a little preloader made with greensock to follow my mouse but when it gets bigger after the animation I want it to stop following the mouse but I can't find a code that will do that neither with greensock nor jQuery/javascript.

codepen link
http://codepen.io/amirhanif/pen/GjbjNe



var self = this;
self.hello = 'hello';
var $fade = $('.fade-bounce');
var $circle = $('.icon');
var movementTimer = null;

TweenMax.to($circle, 3, {
repeat: 2,
rotation: 760,
transformOrigin: "50% 50%",
ease: Bounce.easeOut,
margin: " 0 auto"
});
TweenMax.to(
$circle, 500, {
repeat: -1,
rotation: 50,
delay: 7
});
TweenMax.to(
$circle,
1, {
width: "800vh",
overflow: "hidden",
delay: 7,
y: "-50%",
transformOrigin: "50% 50%",
x: "-50%",
ease: Quad.easeInOut
});
TweenMax.staggerFrom($fade,
1, {
opacity: 0,
scale: 0.1,
delay: 8,
ease: Bounce.easeOut
}, 1.1);



$(window).on('mousemove', moveCircle);


function moveCircle(e) {
TweenLite.to($circle, 0.2, {
css: {
left: e.pageX,
top: e.pageY
}

});

}

$color1:#3f88c5;
body {
overflow: hidden;
height: 100vh;
}
.bg-home {
background-color: $color1;
text-align: center;
width: 100%;
height: 100vh;
margin: 0 auto;
position: absolute;
}
.icon-holder {
margin: 0 auto;
text-align: center;
width: 100%;
height: 100vh;
padding: 0;
z-index: 4;
position: absolute;
}
.icon {
margin: 20px auto;
opacity: 1;
position: absolute;
z-index: 3;
text-align: center;
padding: 0;
width: 30px;
overflow: scroll;
}
.st0 {
fill: #F6A900;
}
.st1 {
fill: #F9CC00;
}
.bigM {
position: relative;
z-index: 2;
width: 100%;
height: 100vh;
display: block;
margin: 0 auto;
background-position: center;
background-size: contain;
padding-top: 20%;
img {
width: 100%;
height: auto;
margin: 0 auto;
}
}
.contentInlog {
width: 100%;
height: 100vh;
position: absolute;
margin: 0 auto;
top: 0;
z-index: 4;
opacity: 1;
}
.win {
position: relative;
z-index: 5;
width: 600px;
height: 400px;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 0px;
top: 0;
margin-bottom: 0;
background-image: url(' ../img/hoofdtekst.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.logo {
position: relative;
z-index: 5;
width: 300px;
height: 300px;
margin: 0 auto;
top: 0;
background-image: url(' ../img/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.fade-bounce {
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<section id="home">
<div class="bg-home"></div>
<div class="icon-holder small-12 columns">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle class="st0" cx="199.5" cy="199.7" r="191.1" />
<path class="st1" d="M199.8 390.8l1-191.1c2.3 0-2.3 0.3 0 0l26.1 189.2C218 390.1 208.8 390.8 199.8 390.8zM172.7 388.9c-9-1.3-18-3.2-26.7-5.8l54.8-183.5c2.2 0.6-2.3-0.3 0 0L172.7 388.9zM253.6 383.1l-52.8-183.4c2.2-0.6-2.1 0.9 0 0l78.4 173.8C270.9 377.3 262.3 380.5 253.6 383.1zM120.4 373.6c-8.3-3.8-16.3-8.2-24-13.1l104.3-160.8c1.9 1.2-2.1-1 0 0L120.4 373.6zM303.1 360.4L200.8 199.7c1.9-1.2-1.8 1.5 0 0l124.1 144.4C318 350 310.7 355.5 303.1 360.4zM74.6 344.2c-6.8-5.9-13.3-12.4-19.2-19.2l145.4-125.3c1.5 1.8-1.8-1.5 0 0L74.6 344.2zM344.1 324.8L200.8 199.7c1.5-1.8-1.2 1.9 0 0L360.5 303C355.6 310.6 350.1 318 344.1 324.8zM39 303.2c-4.9-7.6-9.3-15.7-13.1-23.9l174.8-79.6c0.9 2.1-1.2-1.9 0 0L39 303.2zM373.6 279.1l-172.8-79.4c0.9-2.1-0.6 2.2 0 0l182.4 53.8C380.6 262.2 377.3 270.8 373.6 279.1zM16.3 253.7c-2.6-8.7-4.5-17.7-5.8-26.7l190.2-27.3c0.3 2.3-0.6-2.2 0 0L16.3 253.7zM388.9 226.8l-188.1-27.1c0.3-2.3 0 2.4 0 0l0 0 190-0.3v0.3C390.8 208.7 390.2 217.8 388.9 226.8zM8.6 199.8v-0.1c0-9 0.6-18 1.9-26.9l190.3 26.9c-0.3 2.3 0-2.3 0 0L8.6 199.8zM200.8 199.7C200.4 197.4 201.4 201.8 200.8 199.7L383 145.5c2.6 8.7 4.5 17.7 5.8 26.7L200.8 199.7zM200.8 199.7L16.2 146.1c2.5-8.7 5.8-17.4 9.5-25.6L200.8 199.7C199.8 201.7 201.4 197.5 200.8 199.7zM200.8 199.7C199.8 197.6 202 201.6 200.8 199.7L360.2 96c4.9 7.6 9.3 15.7 13.1 23.9L200.8 199.7zM200.8 199.7L38.8 96.5c4.9-7.6 10.4-15 16.3-21.8L200.8 199.7C199.2 201.4 202 197.7 200.8 199.7zM200.8 199.7C199.2 197.9 202.5 201.2 200.8 199.7L324.6 55c6.8 5.9 13.3 12.4 19.3 19.2L200.8 199.7zM200.8 199.7L74.3 55.4c6.8-5.9 14.2-11.4 21.8-16.4L200.8 199.7C198.8 200.9 202.5 198.1 200.8 199.7zM200.8 199.7C198.8 198.4 202.8 200.6 200.8 199.7l78.1-174c8.3 3.8 16.3 8.2 24 13.1L200.8 199.7zM200.8 199.7L120 25.9c8.3-3.8 16.9-7 25.6-9.6L200.8 199.7C198.6 200.3 202.8 198.7 200.8 199.7zM200.8 199.7C198.6 199 203 200 200.8 199.7l25.7-189.2c9 1.3 18 3.2 26.7 5.7L200.8 199.7zM200.8 199.7L172.3 10.5c8.9-1.3 18-1.9 27.1-2L200.8 199.7C198.4 199.7 203 199.3 200.8 199.7z"
/>
</svg>
</div>

<div class="bigM small-12 large-10 columns ">
<img ng-src="img/BigM.png" width="80%" height="auto">
</div>

<div class="contentInlog">

<div class="win small-12 large-10 columns fade-bounce">

</div>
<div class="logo small-12 large-10 fade-bounce"></div>

<form>
<!-- <section class="content">
<span class="input input--jiro">
<input class="input__field input__field--jiro" type="text" id="input-10" />
<label class="input__label input__label--jiro" for="input-10">
<span class="input__label-content input__label-content--jiro">Voer u email in</span>
</label>
</span>
<span class="input input--jiro">
<input class="input__field input__field--jiro" type="text" id="input-11" />
<label class="input__label input__label--jiro" for="input-11">
<span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span>
</label>
</span>
<span class="input input--jiro">
<input class="input_submit" type="submit" value="DOE MEE" id="input-12" />
</span>
</section> -->

</form>


</div>

</section>




Answer

Your animation end with in 7sec so i was applied with setTimeout() for 7sec. After 7sec the mouse over event will be disabled.

var self = this;
self.hello = 'hello';
var $fade = $('.fade-bounce');
var $circle = $('.icon');
var movementTimer = null;

TweenMax.to($circle, 3, {
  repeat: 2,
  rotation: 760,
  transformOrigin: "50% 50%",
  ease: Bounce.easeOut,
  margin: " 0 auto"
});
TweenMax.to(
  $circle, 500, {
    repeat: -1,
    rotation: 50,
    delay: 7
  });
TweenMax.to(
  $circle,
  1, {
    width: "800vh",
    overflow: "hidden",
    delay: 7,
    y: "-50%",
    transformOrigin: "50% 50%",
    x: "-50%",
    ease: Quad.easeInOut
  });
TweenMax.staggerFrom($fade,
  1, {
    opacity: 0,
    scale: 0.1,
    delay: 8,
    ease: Bounce.easeOut
  }, 1.1);



$(window).on('mousemove', moveCircle);
setTimeout(function () {$(window).off('mousemove', moveCircle);},7000);

function moveCircle(e) {
  TweenLite.to($circle, 0.2, {
    css: {
      left: e.pageX,
      top: e.pageY
    }

  });

}
$color1:#3f88c5;
 body {
  overflow: hidden;
  height: 100vh;
}
.bg-home {
  background-color: $color1;
  text-align: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
}
.icon-holder {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100vh;
  padding: 0;
  z-index: 4;
  position: absolute;
}
.icon {
  margin: 20px auto;
  opacity: 1;
  position: absolute;
  z-index: 3;
  text-align: center;
  padding: 0;
  width: 30px;
  overflow: scroll;
}
.st0 {
  fill: #F6A900;
}
.st1 {
  fill: #F9CC00;
}
.bigM {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: block;
  margin: 0 auto;
  background-position: center;
  background-size: contain;
  padding-top: 20%;
  img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
.contentInlog {
  width: 100%;
  height: 100vh;
  position: absolute;
  margin: 0 auto;
  top: 0;
  z-index: 4;
  opacity: 1;
}
.win {
  position: relative;
  z-index: 5;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 0px;
  top: 0;
  margin-bottom: 0;
  background-image: url(' ../img/hoofdtekst.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.logo {
  position: relative;
  z-index: 5;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  top: 0;
  background-image: url(' ../img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.fade-bounce {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<section id="home">
  <div class="bg-home"></div>
  <div class="icon-holder small-12 columns">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <circle class="st0" cx="199.5" cy="199.7" r="191.1" />
      <path class="st1" d="M199.8 390.8l1-191.1c2.3 0-2.3 0.3 0 0l26.1 189.2C218 390.1 208.8 390.8 199.8 390.8zM172.7 388.9c-9-1.3-18-3.2-26.7-5.8l54.8-183.5c2.2 0.6-2.3-0.3 0 0L172.7 388.9zM253.6 383.1l-52.8-183.4c2.2-0.6-2.1 0.9 0 0l78.4 173.8C270.9 377.3 262.3 380.5 253.6 383.1zM120.4 373.6c-8.3-3.8-16.3-8.2-24-13.1l104.3-160.8c1.9 1.2-2.1-1 0 0L120.4 373.6zM303.1 360.4L200.8 199.7c1.9-1.2-1.8 1.5 0 0l124.1 144.4C318 350 310.7 355.5 303.1 360.4zM74.6 344.2c-6.8-5.9-13.3-12.4-19.2-19.2l145.4-125.3c1.5 1.8-1.8-1.5 0 0L74.6 344.2zM344.1 324.8L200.8 199.7c1.5-1.8-1.2 1.9 0 0L360.5 303C355.6 310.6 350.1 318 344.1 324.8zM39 303.2c-4.9-7.6-9.3-15.7-13.1-23.9l174.8-79.6c0.9 2.1-1.2-1.9 0 0L39 303.2zM373.6 279.1l-172.8-79.4c0.9-2.1-0.6 2.2 0 0l182.4 53.8C380.6 262.2 377.3 270.8 373.6 279.1zM16.3 253.7c-2.6-8.7-4.5-17.7-5.8-26.7l190.2-27.3c0.3 2.3-0.6-2.2 0 0L16.3 253.7zM388.9 226.8l-188.1-27.1c0.3-2.3 0 2.4 0 0l0 0 190-0.3v0.3C390.8 208.7 390.2 217.8 388.9 226.8zM8.6 199.8v-0.1c0-9 0.6-18 1.9-26.9l190.3 26.9c-0.3 2.3 0-2.3 0 0L8.6 199.8zM200.8 199.7C200.4 197.4 201.4 201.8 200.8 199.7L383 145.5c2.6 8.7 4.5 17.7 5.8 26.7L200.8 199.7zM200.8 199.7L16.2 146.1c2.5-8.7 5.8-17.4 9.5-25.6L200.8 199.7C199.8 201.7 201.4 197.5 200.8 199.7zM200.8 199.7C199.8 197.6 202 201.6 200.8 199.7L360.2 96c4.9 7.6 9.3 15.7 13.1 23.9L200.8 199.7zM200.8 199.7L38.8 96.5c4.9-7.6 10.4-15 16.3-21.8L200.8 199.7C199.2 201.4 202 197.7 200.8 199.7zM200.8 199.7C199.2 197.9 202.5 201.2 200.8 199.7L324.6 55c6.8 5.9 13.3 12.4 19.3 19.2L200.8 199.7zM200.8 199.7L74.3 55.4c6.8-5.9 14.2-11.4 21.8-16.4L200.8 199.7C198.8 200.9 202.5 198.1 200.8 199.7zM200.8 199.7C198.8 198.4 202.8 200.6 200.8 199.7l78.1-174c8.3 3.8 16.3 8.2 24 13.1L200.8 199.7zM200.8 199.7L120 25.9c8.3-3.8 16.9-7 25.6-9.6L200.8 199.7C198.6 200.3 202.8 198.7 200.8 199.7zM200.8 199.7C198.6 199 203 200 200.8 199.7l25.7-189.2c9 1.3 18 3.2 26.7 5.7L200.8 199.7zM200.8 199.7L172.3 10.5c8.9-1.3 18-1.9 27.1-2L200.8 199.7C198.4 199.7 203 199.3 200.8 199.7z"
      />
    </svg>
  </div>

  <div class="bigM small-12 large-10 columns ">
    <img ng-src="img/BigM.png" width="80%" height="auto">
  </div>

  <div class="contentInlog">

    <div class="win small-12 large-10 columns fade-bounce">

    </div>
    <div class="logo small-12 large-10 fade-bounce"></div>

    <form>
      <!-- <section class="content">
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-10" />
					<label class="input__label input__label--jiro" for="input-10">
						<span class="input__label-content input__label-content--jiro">Voer u email in</span>
        </label>
        </span>
        <span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-11" />
					<label class="input__label input__label--jiro" for="input-11">
						<span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span>
        </label>
        </span>
				<span class="input input--jiro">
					<input class="input_submit"  type="submit" value="DOE MEE" id="input-12" />
        </span>
    </section> -->

    </form>


  </div>

</section>

Comments