In web.whatsapp there is a cool little morph that happens when you focus or blur the contacts search field. The html looks like this (I don't recognise anything significant there):

<button class="icon icon-search-morph" data-reactid=".0.1:$main.2.2.0">
  <div class="icon icon-back-blue" data-reactid=".0.1:$main.2.2.0.0"></div>
  <div class="icon icon-search" data-reactid=".0.1:$main.2.2.0.1"></div>
</button>

Through trying to acplish something similar I've e across this awesome library (demo here) but I don't know how the whatsapp/facebook people do it and I'm wondering the best way to acplish it. I'm also not sold on the svg-morpheus technique that requires svgs (as opposed to webfonts) but maybe that's the only option?

(If you don't use web.whatsapp, basically it's an animated transition (morph) from one icon to another. In the whatsapp app it is a morph between a back arrow and a magnifying glass)

In web.whatsapp. there is a cool little morph that happens when you focus or blur the contacts search field. The html looks like this (I don't recognise anything significant there):

<button class="icon icon-search-morph" data-reactid=".0.1:$main.2.2.0">
  <div class="icon icon-back-blue" data-reactid=".0.1:$main.2.2.0.0"></div>
  <div class="icon icon-search" data-reactid=".0.1:$main.2.2.0.1"></div>
</button>

Through trying to acplish something similar I've e across this awesome library (demo here) but I don't know how the whatsapp/facebook people do it and I'm wondering the best way to acplish it. I'm also not sold on the svg-morpheus technique that requires svgs (as opposed to webfonts) but maybe that's the only option?

(If you don't use web.whatsapp, basically it's an animated transition (morph) from one icon to another. In the whatsapp app it is a morph between a back arrow and a magnifying glass)

• javascript
• css
• animation

• they actually use two icons, and just fade/rotathe them on focus/blur. – LorDex Commented Mar 11, 2015 at 14:17
• @LorDex can you make a fiddle that imitates it? – jcuenod Commented Mar 11, 2015 at 19:42

3 Answers 3

Whatsapp Web uses two icons overlaying each other (one has of them has opacity:0)

Here is a tutorial for this (I just made it, because it's an interesting technique).

And here is the codepen.

The tutorial uses MaterializeCSS and the Google icon font. This example below is achieved with out those, and is only ment as a quick demostration.

But I figure, that you want to do something in the style of Whatsapp Web (Material Design), so MaterializeCSS and the Google Icon font are two verry helpful sources.

.anim-container {
	height:4rem;
	width:4rem;
	transition:.3s;
	position:relative;
	cursor:pointer;
	}
	.anim-container .icons {
		transition:.3s;
		position:absolute;
		font-size:4em !important;
		height:1em;
		width:1em;
	}
	.anim-container .arr {
		transform:rotate(-135deg);
		opacity:0;
	}
	
.anim-container.morphed {
	transform:rotate(135deg);
	}
	.anim-container.morphed .arr {
		opacity:1;
	}
	.anim-container.morphed .search {
		opacity:0;
	}

.anim-container.small {
	height:2rem;
	width:2rem;
	font-size:.5rem;
}

<div class="anim-container small" onclick="this.classList.toggle('morphed')">
	<img src="https://maxcdn.icons8./windows10/PNG/32/Arrows/left_arrow-32.png" class="icons arr">
	<img src="https://maxcdn.icons8./Android_L/PNG/24/Very_Basic/search-24.png" class="icons search">
</div>
<div style="opacity:.7;">
	These two icons are from
	<a href="https://icons8." target="_blank">Icons8</a>
</div>

Whatsapp overlays 2 icons, and animates their size and opacity.

Here is an example which copies their animation, which works with any icon.

document.querySelectorAll('.morphing-icons').forEach(div => {
  div.addEventListener('click', e => {
    div.classList.toggle('morphed')
  })
})

.morphing-icons {
     position: relative;
     cursor: pointer;
}
 .morphing-icons i {
     position: absolute;
     user-select: none;
     top: 0;
     left: 0;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 .morphing-icons i:first-of-type {
     transform: rotate(0);
}
 .morphing-icons i:last-of-type {
     opacity: 0;
     transform: scale(0.8) rotate(225deg);
}
 .morphing-icons.morphed i:first-of-type {
     opacity: 0;
     transform: rotate(135deg);
}
 .morphing-icons.morphed i:last-of-type {
     opacity: 1;
     transform: scale(1) rotate(1turn);
}
 

<link href="https://fonts.googleapis./icon?family=Material+Icons"
      rel="stylesheet">
<div class="morphing-icons">
  <i class="material-icons" style="color:#919191">search</i>
  <i class="material-icons" style="color:#33b7f6">arrow_back</i>
</div>

<div class="morphing-icons" style="margin-left:32px">
  <i class="material-icons">play_arrow</i>
  <i class="material-icons">pause</i>
</div>

it's probably done with an SVG animation / morphing

https://css-tricks./svg-shape-morphing-works/

basically icons / png nowadays are vector graphics which can be easily adjusted since they are simply text based. You can even put the animation inside the actual image code. or simply use it with jquery and css classes like:

svg.animating {
    transform: rotate(90deg);
}

which would rotate your svg by 90°

http://www.w3schools./svg/ for further infos on svg