Why does Case #1 Work, but Case #2 does not?

cssanimation
#1

Hi there! I have a very interesting oddity that I am hoping someone can solve. I posted this on stack exchange because I needed the ability to embed the two different examples.

The Animation The animation being applied is a CSS “blur” that should blur out the element on scroll down, then bring it back into focus on scroll up.

Example #1 - WORKS! The HTML and CSS are identical. The jQuery is slightly different in that it is targeting the parent instead of a child element.

Example 2 - DOES NOT Work! Even thought the same styles ARE ABSOLUTELY being applied to the correct element The HTML and CSS are identical. The jQuery is slightly different in that it is targeting the child element instead of the parent.

What’s Happening? In the first case, the jQuery targets the parent with the BLUR animation and as expected, blurs and un-blurs on scroll when it is supposed to.

What’s Wrong? In the second example, everything is the same EXCEPT instead of targeting the parent, I would like to blur just the letter “S” and leave the “T” alone.

As you can see, the same blur style classes that works in the first case are also being applied to the second case. HOWEVER - while the styles are being applied to the second case, they’re not actually affecting the element. No Blur, no borders (that I added for testing).

Anyone know why this animation would work on the parent element, affecting the children, yet NOT work when targeting a specific child?

Thank you!

EXAMPLE 1 (works)

jQuery(document).ready(function($) {

	// Smooth OUT
	$('#smooth-logo').waypoint(function(direction) {
		
		if (direction === 'down') {

			$('#smooth-logo').addClass('swirl-in-fwd');
			$('#smooth-logo').removeClass('swirl-in-bkw');

		} else if (direction === 'up') {  

			$('#smooth-logo').addClass('swirl-in-bkw');
			$('#smooth-logo').removeClass('swirl-in-fwd');
		}
	}, 
		
	{ offset: '0%' });
	
});
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid red;
}
.swirl-in-bkw {
  animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid blue;
}


/* 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="10in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- BIG S -->
		<path id="bigS" class="" 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 T -->
		<polygon id="bigS1" class="" 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"/>

	</svg>
</div>
</header>

EXAMPLE 2 (does not work even though the styles ARE being applied to the element)

jQuery(document).ready(function($) {

	// Smooth OUT
	$('#smooth-logo').waypoint(function(direction) {
		
		if (direction === 'down') {

			$('#bigS').addClass('swirl-in-fwd');
			$('#bigS').removeClass('swirl-in-bkw');

		} else if (direction === 'up') {  

			$('#bigS').addClass('swirl-in-bkw');
			$('#bigS').removeClass('swirl-in-fwd');
		}
	}, 
		
	{ offset: '0%' });
	
});
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid red;
}
.swirl-in-bkw {
  animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid blue;
}


/* 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="10in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- BIG S -->
		<path id="bigS" class="" 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 T -->
		<polygon id="bigS1" class="" 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"/>

	</svg>
</div>
</header>
0 Likes

#2

I don’t believe you can use the filter css property inside the svg. It looks like you have to use the filter element in the svg and reference that instead.

e.g.

		<filter id="bigS"> <feGaussianBlur in="SourceGraphic" stdDeviation="20"/></filter>
		<path   filter="url(#bigS)"  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"/>

I’m guessing you would need to change the ‘stdDeviation’ attribute with js dynamically to achieve the effect you wanted. However svg and JS are out of my comfort zone :slight_smile:

Here’s a CSS attempt but is too long winded to be used for real as it just puts multiple filter references in the keyframes and although they don’t animate between they will change in steps.

https://codepen.io/paulobrien/pen/dLzeYX

Just proof of concept really and not an answer to your question as such.

1 Like

#3

Why is that? I am not aware of anything we can do in StackExchange that cannot be done here. The thing that really helps getting answers is to create a fiddle or something like that, such as what @PaulOB did. Also, it helps to link to the other instance of the question so people can determine what has already been said and they do not waste time posting something that has already been posted somewhere.

1 Like

#4

I don’t see an option to post my pen inside of the content box here like you can within Stack so you can run the code inside the page. If you could kindly point out where this option is, I’ll be sure to use it in the future.

0 Likes

#5

Just paste the URL of the Pen in your post, it’s as simple as that.

0 Likes

#6

I see. I suppose then to answer your question about what Stack Overflow has that SitePoint does not is that Stack allow scripts to be embedded into the question, and run via the posted question, vs linking out to a 3rd party site. As of right now, is it my understanding that this is not an option in SitePoint, and the preferred method is to link out to a pen project on a 3rd party site?

Thanks for the clarification.

0 Likes

#7

Hopefully this isn’t a dumb question - but how do you know what feGaussianBlur is, and what parameters/options need to be there to work? I found some documentation in it, but I can’t seem to find anything that helps understand the requirements for each of these filters. Thanks mate!

0 Likes

#8

Sorry, I’m unfamiliar with this myself and can only point to the MDN docs.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

They have demos and show the allowed attributes etc but I’m guessing you already looked there :slight_smile:

The w3c docs are here if you can fathom out what you need from them.

0 Likes