Friends talking about socks.

In this example below you will see how to do a Friends talking about socks. with some HTML / CSS and Javascript

Test with GreenSock: morphSVG

Thumbnail
This awesome code was written by mikeK, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mikeK ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Friends talking about socks.</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
			<svg id="gespraech" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 456 408">
			  <path fill="none" stroke="#000" stroke-width="4" d="M.994 341.706l22.857-13.233c10.93-75.926 31.47-21.9 48.12-20.45 16.01-42.078-16.73-114.623-25.26-172.03l87.82-66.168M77.99 127.57l85.41-61.352"></path>
			  <path fill="none" stroke="#000" stroke-width="3.516" d="M104.736 131.723l75.07-53.924"></path>
			  <path id="ErwinSpricht" fill="none" stroke="#000" stroke-width="4" d="M145.355 104.714c16.538 10.36 19.472 29.792 16.842 52.932 99.378-22.32 24.816 18.61-8.42 44.51l2.405 24.06c-31.66.902-35.652 20.38-10.827 33.686l-35.332 47.682c-18.967 25.597 61.16 36.603 63 16.077l-3.608 56.55 28.872 15.64 4.812 10.827"></path>
			  <path fill="none" stroke="#000" stroke-width="4" d="M103.25 189.53c-1.566-2.43-.57-5.348-5.17-1.685-12.017 9.566-9.11 39.797 9.98 50.406"></path>  
			  <path d="M151.97 169.375a5.263 8.722 0 1 1-.016-.704"></path>
			  <path fill="none" stroke="#000" stroke-width="4" d="M244.742 331.506c9.838-21.677 4.874-62.105 45.935-44.234 25.135 6.557 37.16-9.83 44.234-34.877m40.84-15.312c1.947 26.75 23.043 26.14 39.98 31.475 47.5-18.964 36.463 9.967 36.58 29.773l-5.107 29.78c-4.182 9.38-12.39 19.16 5.105 26.37M333.21 141.81c-27.576 73.95-155.433 32.853-12.76-39.98l-6.805-46.787c2.284-33.66 74.745-15.436 72.306 4.254l-5.1 41.682c57.568-42.98 59.48-9.44-5.1 40.83-11.74 29.2-8.073 58.41-6.804 87.61l-29.773 12.76c-26.777 11.29-34.966-12.53-41.682-39.13"></path>
			  <path d="M352.41 117.078a6.033 9.998 20.003 1 1 .257-.765z"></path>
			  <path id="EdgarMundAuf" d="M331.594 181c-6.84-6.415-20.678 3.944-17.504 15.925 3.508 13.24 7.53 17.62 20.71 1.733 4.137-9.543 1.097-13.835-3.206-17.657z"></path>
			  <path id="EdgarMundZu" d="M325.58 189.36c-2.075-1.948-6.276 1.196-5.312 4.833 1.064 4.018 2.285 5.348 6.286.526 1.255-2.9.333-4.2-.973-5.36z" data-original="M325.58 189.36c-2.075-1.948-6.276 1.196-5.312 4.833 1.064 4.018 2.285 5.348 6.286.526 1.255-2.9.333-4.2-.973-5.36z"></path>
			  <path id="ErwinMundZu" fill="none" stroke="#000" stroke-width="4" d="M145.88 104.92c16.54 10.362 19.473 29.793 16.843 52.933 99.38-22.32 24.817 18.61-8.42 44.512l-5.208 44.39c-25.042 11.126-27.042 10.79-3.42 4.847l-35.125 56.19c-16.887 27.013 61.16 36.602 63 16.076l-3.61 56.542 28.874 15.64 4.812 10.826" data-original="M145.88 104.92c16.54 10.362 19.473 29.793 16.843 52.933 99.38-22.32 24.817 18.61-8.42 44.512l-5.208 44.39c-25.042 11.126-27.042 10.79-3.42 4.847l-35.125 56.19c-16.887 27.013 61.16 36.602 63 16.076l-3.61 56.542 28.874 15.64 4.812 10.826"></path>
			</svg>
		<p class="frage01 Erwin hidden" >Do you like GREENSOCK?</p>
		<p class="antwort01 Edgar hidden">Nooo ...</p>
		<p class="frage02 Edgar hidden">I prefer red socks!</p>
		<p class="antwort02 Erwin hidden">So you are not a coder.</p>
		</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/friends-talking-about-socks-evYbXo */
body{background-color: #B4B4B4;}
.wrapper {
    width: 90vw;
    height: 50.625vw;
    max-height: 80vh;
    max-width: 160vh;
    margin: auto;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    visibility:hidden;
}
#gespraech {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    stroke: #868585;
    fill: #868585;
}
#gespraech path {
    stroke: #868585;
}
#EdgarMundAuf, #ErwinSpricht, .hidden {
    visibility: hidden;
}

.Erwin {
    position: absolute;
    left: 10%;
    top: 88%;
    width: 139px;
    font-size: 24px;
    color: #91ff17;
}
.Edgar {
    position: absolute;
    left: 62%;
    top: 77%;
    width: 107px;
    font-size: 24px;
    color: #91ff17;
}

/*Downloaded from https://www.codeseek.co/mikeK/friends-talking-about-socks-evYbXo */


var timeline1 = new TimelineLite({delay:2})
	.set(".wrapper",{autoAlpha:1})
	.to("#ErwinMundZu",0.1, {morphSVG:"#ErwinSpricht", repeat:9, yoyo:true, repeatDelay:0, ease: Power3.easeOut })
	.to (".frage01", 0.1, {autoAlpha: 1},0)
	.to("#EdgarMundZu",1, {morphSVG:"#EdgarMundAuf", repeat:1, yoyo:true })
	.to(".antwort01", 0.1, {autoAlpha: 1}, "-=2")
	.to(".frage01, .antwort01", 0.1, {autoAlpha: 0})
	.to("#EdgarMundZu",0.1, {morphSVG:"#EdgarMundAuf", repeat:9, yoyo:true, repeatDelay:0, ease: Power3.easeOut }, "+=0.5")
	.to(".frage02", 0.1, {autoAlpha: 1}, "-=1")
	.to("#ErwinMundZu",0.1, {morphSVG:"#ErwinSpricht", repeat:7, yoyo:true, repeatDelay:0, ease: Power3.easeOut }, "+=1")
	.to(".antwort02", 0.1, {autoAlpha: 1}, "-=0.5")

Comments