SVG animated through path - responsive

In this example below you will see how to do a SVG animated through path - responsive with some HTML / CSS and Javascript

A fork forhttps://greensock.com/forums/topic/16470-animating-through-a-svg-path-and-make-it-responsive/

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>SVG animated through path - responsive</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <aside>
 <svg xmlns="http://www.w3.org/2000/svg" id="trazado" viewbox="0 0 832 496" width="832" height="496">
    
    <path id="pathAbeja" fill="none" stroke="#ff171b" stroke-miterlimit="10" d="M775.246 150.652S734.13 9.988 542.61 9.988 318.63 205.836 318.63 256.69c0 50.857 47.608 232.64 243.456 232.64 195.848 0 202.545-195.85 202.34-216.408C763.344 163.637 609.696 78.157 676.78 9.99c47.155-47.915 154.73 93.054 154.73 258.605 0 165.55-105.017 220.91-181.78 223.98-108.203 4.327-175.29-95.22-178.535-242.376C467.95 103.04 398.7 6.74 214.755 6.74 30.808 6.742.51 202.59.51 248.034c0 87.24 41.117 242.375 221.816 242.375 180.7 0 220.734-180.72 221.816-222.9 3.246-126.6-160.14-213.16-88.727-256.44 71.414-43.28 153.65 84.4 153.65 247.78s-85.48 235.88-190.438 235.88c-104.96 0-206.328-110.38-188.274-258.61 20.56-168.797 241.293-277 322.445-8.656C533.95 495.814 684.836 434 722.225 408.17c59.512-41.12 89.808-136.337 53.02-257.525z"/>
    <g id="abeja">
      <path id="path3061" fill="#28251d" d="M20.33 21.633c1.394 1.812.107 4.768-2.876 6.6-2.982 1.835-6.53 1.852-7.926.04-1.395-1.812-.108-4.768 2.874-6.602 2.983-1.83 6.532-1.85 7.927-.03z"/>
      <path id="path3831" fill="#38251d" d="M13.922 28c0 1.86-1.55 3.37-3.464 3.37S6.993 29.86 6.993 28s1.55-3.367 3.465-3.367c1.913 0 3.464 1.508 3.464 3.368z"/>
      <path id="path3833" fill="#6e251d" d="M9.014 28.025c0 1.262-.43 2.286-.962 2.286s-.963-1.02-.963-2.28.43-2.28.96-2.28.96 1.025.96 2.287z"/>
      <path id="path3833-1" fill="#6e251d" d="M13.874 28.025c0 1.316-.485 2.382-1.083 2.382-.59 0-1.08-1.066-1.08-2.382 0-1.315.49-2.382 1.08-2.382.6 0 1.09 1.067 1.09 2.382z"/>
      <path id="path3853" fill="#17251d" d="M11.035 31.13c0 .504-.388.913-.866.913-.48 0-.87-.41-.87-.914 0-.51.38-.92.86-.92s.862.41.862.91z"/>
      <path id="path3855" fill="none" stroke="#fbdb00" stroke-opacity=".764" d="M11.163 23.525c4.108.162 4.003 4.743 4.003 4.743" stroke-linecap="round"/>
      <path id="path3855-7" fill="none" stroke="#fbdb00" stroke-opacity=".764" d="M15.908 21.118c2.68.435 2.846 3.043 2.982 4.2" stroke-linecap="round"/>
      <path id="path3855-4" fill="none" stroke="#fbdb00" stroke-opacity=".764" d="M13.05 22.14c4.448.57 3.935 5.15 3.935 5.15" stroke-linecap="round"/>
   
	<path id="leftWingDown" class="down" fill="#d3d4d4" stroke="#000" stroke-width=".6" d="M9.978 25.23c-13.22-.195-4.814-16.016 1.452-2.9" stroke-linecap="round"/>
    <path id="leftWingTop" fill="#d3d4d4" stroke="#000" stroke-width=".6" d="M10.644 22.96c-11.624-6.3 4.94-17.035 4.412-2.51" stroke-linecap="round"/>
    <path id="rightWingDown" class="down" fill="#d3d4d4" stroke="#000" stroke-width=".6" d="M18.327 24.633c12.257-1.38 11.366 11.792-2.663 2.89" stroke-linecap="round"/>
    <path id="rightWingTop" fill="#d3d4d4" stroke="#000" stroke-width=".6" d="M18.43 24.637c12.233-9.375 16.106 1.982-2.468 2.81" stroke-linecap="round"/>
	 </g>
</svg>
    </aside>
  <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?v=0.6.0'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/svg-animated-through-path-responsive-OmoGVM */
aside {
  position: fixed;
  width: 99%;
  height: 90%;
  top:5%;
  overflow:visible;
    }

#trazado {
  width: 100%;
  height: 100%;
  overflow:visible;
}
#abeja {
  visibility:hidden;
}
.down{visibility:hidden;}

/*Downloaded from https://www.codeseek.co/mikeK/svg-animated-through-path-responsive-OmoGVM */
TweenMax.set("#abeja",{autoAlpha: 1, xPercent:-50, yPercent:-100, scale:3, transformOrigin:"center center"});

var motionPath = MorphSVGPlugin.pathDataToBezier('#pathAbeja', {align:"#abeja"}) ;

TweenMax.to('#abeja', 20, {bezier:{values:motionPath, type:"cubic", autoRotate:220}, ease:Linear.easeNone, repeat: -1 });

var flying = new TimelineMax({ repeat: -1, repeatDelay:0.0001, yoyo: true})
  .to("#leftWingTop",0.0005, {morphSVG:"#leftWingDown", ease:Linear.easeNone})
  .to("#rightWingTop",0.0005, {morphSVG:"#rightWingDown", ease:Linear.easeNone})

Comments