CSS Animations - Please tell me why Case #1 works, but Case #2 does not

Question

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. (works in FF and Chrome)

Example 2 - DOES NOT Work! The HTML and CSS are identical. The jQuery is slightly different in that it is targeting the child element instead of the parent. (works in FF but NOT Chrome)

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);
  }
}

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);
  }
}

Paul LeBeau · Accepted Answer

The difference is that in the first example you are applying a CSS filter function to an HTML element. In the second you are applying a CSS filter function to an SVG child element. Not all browsers support using filter functions on SVG elements yet.

The workaround is to use SVG filters and animation instead.

Note that SVG animation doesn't work in IE/Edge. So you may need to use a polyfill for that. See https://leunen.me/fakesmile/

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

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

			$('#bigS').addClass('swirl-in-fwd');
			$('#bigS').removeClass('swirl-in-bkw');
			$('#animOut').get(0).beginElement(); // restart the animation

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

			$('#bigS').addClass('swirl-in-bkw');
			$('#bigS').removeClass('swirl-in-fwd');
			$('#animIn').get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: '0%' });
	
});

.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

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

CSS Animations - Please tell me why Case #1 works, but Case #2 does not

Answers (1)

Related Questions