I have a logo that starts in with a basic SVG animation. When a user scrolls down it fires off another animation that pushes the logo sideways and shows part of the logo. When you scroll back up, the logo slides back into view.
This all works great!
The Issue If I reload the page half way down, or (which is odd) hover on a link, the animation restarts so the logo is visible and covering content. This is obviously not the desired effect.
The Question Is there any way I can say offset 20% FROM THE TOP of the page vs the top of the browser so the animation will not re-fire until or do anything until if it's not 20% from the actual top?
The Pace You Can See The Logo In Action (and the bug) https://stable.stable-demos.com/our-work/
How to Reproduce Load page, scroll down half way, reload page. You will see full logo which can only be hidden again if the users scrolls again (because it's measuring browser window offset vs top of page offset).
Jeez I hope that makes sense. Thanks all for your input!
jQuery(document).ready(function($) {
// Smooth OUT
$('#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>
<script src="../custom.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>I Tried This Update Code But it just automatically triggers instead of at the DIV with the ID specified in context:
jQuery(document).ready(function($) {
$("#smooth-logo").waypoint(function(direction) {
var $target = $( '#targetPoint' );
if (direction === 'down' && $target ){
$(".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%', context: 'body' });
});
I have an example here at this URL: https://stable.stable-demos.com/quip/
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>