0

I’ve created animated rect shape with greensock. It's not working on jsfiddle so created on codepen
I’ve three shapes. I need help with following,

  1. make it 100% height & width of viewport
  2. it stops for a while before repeating, move rect without any gaps
  3. they bacomes one rect while ending keep fixed distance between all 3 rect

    <svg  x="0px" y="0px" width="100%" height="100%">
      <rect x="0" y="0" fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect1" />
      <rect x="0" y="0" fill="none" stroke="#ce4201" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect2" />
      <rect x="0" y="0" fill="none" stroke="#8601ce" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect3" />
    </svg>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> 
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> 
    
    $( document ).ready(function() {
    
    var shapes = $("rect"),
    tl = new TimelineMax({repeat:-1});
    
    tl.staggerFromTo(shapes, 6, {drawSVG:"2%"}, {drawSVG:"98% 100%"}) 
    
    });
1
Contributor
1
Reply
17
Views
1 Week
Discussion Span
Last Post by tun712
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.