Together on top

In this example below you will see how to do a Together on top with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Together on top</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<svg xmlns="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 780 450" width="780" height="450">
  <g id="layer1">
    <path id="pathRed01" fill="none" stroke="#ff0000" d="M18.305 404.913C97.565 230.35 170.36 163.88 256.17 155.676"/>
    <path id="pathBlue01" fill="none" stroke="#0000ff" d="M19.584 404.913C49.296 212.1 303.034 44.95 542.674 35.463"/>
    <path id="RedRect" fill="#ff0000" d="M10.108 396.306h20v20h-20z"/>
    <path id="BlueRect" fill="#0000ff" d="M10.108 396.306h20v20h-20z"/>
    <path id="pathBlue02" fill="none" stroke="#0000ff"  d="M542.673 35.082c256.168 10.112 221.338 371.1 221.338 371.1"/>
    <path id="pathRed02" fill="none" stroke="#ff0000"  d="M256.17 155.63c164.816-28.223 510.678 248.518 507.84 250.552"/>
  </g>
</svg>
  <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/together-on-top-JNXRJx */

body{
  width:100%;
  margin;0;
}
#svg{
  position: absolute;
  width: 80%;
  margin: 10px 10%;
}

/*Downloaded from https://www.codeseek.co/mikeK/together-on-top-JNXRJx */
TweenMax.set("#pathBlue02, #pathRed02",{strokeWidth:4})

var red = MorphSVGPlugin.pathDataToBezier("#pathRed01", {offsetX:0, offsetY:0, relative:true});
var red02 = MorphSVGPlugin.pathDataToBezier("#pathRed02", {offsetX:0, offsetY:0, relative:true});

var blue = MorphSVGPlugin.pathDataToBezier("#pathBlue01", {offsetX:0, offsetY:0, relative:true});
var blue02 = MorphSVGPlugin.pathDataToBezier("#pathBlue02", {offsetX:0, offsetY:0, relative:true});

var topBlue = new TimelineMax({paused:true, repeat: -1, repeatDelay:1, yoyo: true})
  .to("#BlueRect", 3, {bezier: {values:blue, type:"cubic"}, ease:Linear.easeNone},0)
  .to("#BlueRect", 1, {bezier: {values:blue02, type:"cubic"}, ease:Linear.easeNone})
  
var topRed = new TimelineMax({paused:true, repeat: -1, repeatDelay:1, yoyo: true})
  .to("#RedRect", 3, {bezier: {values:red, type:"cubic"}, ease:Linear.easeNone},0)
  .to("#RedRect", 1, {bezier: {values:red02, type:"cubic"}, ease:Linear.easeNone})

var main = new TimelineMax()
  .add(topBlue.play())
  .add(topRed.play(),0)

Comments