Member Avatar for tun712

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
  • 575 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tun712
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.