jquerycss-animationsjquery-waypoints

How to target an item for animation when it hits the WayPoint div

I am hoping you can help me out with understanding how jQuery Waypoints works.

The Goal

  1. Scroll down to the specified div with id of #targetPoint
  2. Once hit, trigger animation for element #smooth-logo

** Animations should not trigger they hit the #targetPoint **

What I'm Doing Doesn't work and is likely not the way to do this, but the Waypoint documentation is confusing to me (novice) so I'm hoping someone who has more experience can help me figure out how to construct this.

The website where this is live is here:

https://stable.stable-demos.com/quip/

Note: This code currently has a console error, but if you go to this pen you can see the intended animation that should run when the #targetPoint is hit.

https://codepen.io/brittany-golden/pen/OGxbxq

jQuery(function($){

	// When you reach the target div
	$('#targetPoint').waypoint(function(direction) {
	  
    // Target this element and run the up or down animation respectively
		$("#smooth-logo").waypoint(function(direction) {
		
		if (direction === 'down') {
			$(".fadeMe").addClass("blur-in-fwd");
			$(".fadeMe").removeClass("blur-in-bkw");
			$("#smooth-logo").addClass("slideLeft");
			$("#smooth-logo").removeClass("slideRight");
			$("#animOut").get(0).beginElement(); // restart the animation
		} else if (direction === 'up') {  
			$(".fadeMe").addClass("blur-in-bkw");
			$(".fadeMe").removeClass("blur-in-fwd slide-right");
			$("#smooth-logo").addClass("slideRight");
			$("#smooth-logo").removeClass("slideLeft");
			$("#animIn").get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: "0%" })
		
		
	});
  
});
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- small the -->
		<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>

		<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>

		<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>


		<!-- BIG S -->
		<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
		<!-- Big S Blur Animation -->
		<defs>

		  <!-- BLUR IN -->
	      <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
	          <animate id="animOut"
	                   attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="1" result="alphapart">
	          <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	      
	      <!-- BLUR OUT -->
	      <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
	          <animate id="animIn"
	                   attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="0" result="alphapart">
	          <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	    </defs>


		<!-- BIG T -->
		<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

		<!-- ICON UPPER -->
		<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>

		<!-- ICON LOWER -->
		<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>

		<!-- BIG B -->
		<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>

		<!-- BIG L -->
		<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>

		<!-- BIG E -->
		<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
	</svg>
</div>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>

Solution

  • Working snippet below, is that what you want? Basically you don't need to specify the #smooth-logo waypoint as it is part of your animation and the logo itself which always remains fixed at the same position whenever you scroll the page, all you need to specify is the target point and when it reaches it the animation will run (i've put a console.log() to notify when the target is reached):

    $(function() {
    $('#targetPoint').waypoint(function(direction) {
    console.log('waypoint reached!');
	  
    // Target this element and run the up or down animation respectively
		
		if (direction === 'down') {
			$(".fadeMe").addClass("blur-in-fwd");
			$(".fadeMe").removeClass("blur-in-bkw");
			$("#smooth-logo").addClass("slideLeft");
			$("#smooth-logo").removeClass("slideRight");
			$("#animOut").get(0).beginElement(); // restart the animation
		} else if (direction === 'up') {  
			$(".fadeMe").addClass("blur-in-bkw");
			$(".fadeMe").removeClass("blur-in-fwd slide-right");
			$("#smooth-logo").addClass("slideRight");
			$("#smooth-logo").removeClass("slideLeft");
			$("#animIn").get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: "0%" })
		
});
    .header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- small the -->
		<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>

		<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>

		<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>


		<!-- BIG S -->
		<path id="bigS" class="fadeMe bigS slideAll" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>
		<!-- Big S Blur Animation -->
		<defs>

		  <!-- BLUR IN -->
	      <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
	          <animate id="animOut"
	                   attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="1" result="alphapart">
	          <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	      
	      <!-- BLUR OUT -->
	      <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
	        <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
	          <animate id="animIn"
	                   attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
	        </feGaussianBlur>
	        <feFlood flood-color="white" flood-opacity="0" result="alphapart">
	          <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
	                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
	        </feFlood>
	        <feComposite in="blurpart" in2="alphapart" operator="in"/>
	      </filter>
	    </defs>


		<!-- BIG T -->
		<polygon id="bigS1" class="fadeMe bigS1 slideAll" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

		<!-- ICON UPPER -->
		<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>

		<!-- ICON LOWER -->
		<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>

		<!-- BIG B -->
		<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>

		<!-- BIG L -->
		<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>

		<!-- BIG E -->
		<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
	</svg>
</div>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>