CODEWITHSUNDEEP
jquerycsssvg-filters
Sophia Saiada
Sophia Saiada

Reputation: 11

Gooey effect messed up after transition ends

I'm trying to create a kind of radio button with the gooey effect. The effect looks well while the transition happens, but as soon as the transition ends, the effect is messed up (the colors do not blend well and the edges glow).

I've been trying to figure out what's the problem, without success.

Video: https://vimeo.com/248225026

Here is the code:

$('.register-option').click(function() {
  $('.register-option').removeClass('selected');
  $(this).addClass('selected');
});
body {
  background-color: rgb(158, 158, 158);
}

.register-choose {
  -webkit-filter: url(#goo);
  filter: url(#goo);
}

.register-choose .register-option {
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 120px;
  display: inline-block;
  color: #000;
  font-family: Tahoma;
  line-height: 40px;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  background-repeat: no-repeat;
}

.register-choose .register-option.selected {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.register-choose .register-option:first-of-type.selected {
  background-color: rgb(0, 181, 255);
}

.register-choose .register-option:last-of-type.selected {
  background-color: rgb(255, 118, 217);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="register-choose">
                <span class="register-option selected">Male</span>
<span class="register-option">Female</span>
</span>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6" result="goo" />
				<feComposite in="SourceGraphic" in2="goo" operator="atop" />
			</filter>
		</defs>
	</svg>

Thanks.

Upvotes: 1

Views: 87

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31705

This is a magical incantation that seems to solve the Firefox visual bug. I have no idea why it works, but it seems to kick the right part of the Firefox filter code.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo" >
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6"/>

    <feComponentTransfer result="goo">
      <feFuncA type="table" tableValues="0 .2 .4 .6 1 1"/>
     </feComponentTransfer>
            <<feComposite in="SourceGraphic" in2="goo" operator="atop" />
            </filter>
        </defs>
    </svg>

Upvotes: 1

Related Questions