CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
eatmailyo
eatmailyo

Reputation: 670

Offsetting elements when animate with jQuery

I'm making a animated page, with 3 elements, who moves on svg lines, but I don't know why, they offsetting. I think this is the issue in jQuery, but how to fix this.

There's the JSFiddle JQUERY

    $(document).ready(function() {
        // FIRST CIRCLE
        $(".circle-1").animate({left: '0%', top: '0%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
        $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
        $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
        // SECOND CIRCLE
        $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
        $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
        $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
        // THIRD CIRCLE
        $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
        $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
        $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
        $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
    });

Upvotes: 2

Views: 58

Answers (2)

Alexander Higgins
Alexander Higgins

Reputation: 6923

You elements are being animated along the upper left hand corner of the element. It only appears to be a circle because you styled it that way.

To correct the issue you can use negative margins to offset the element so that their center is in the path you wish to animate. Your outer circle is 32px so use -16px a the margin. You then correct the inner elements by offsetting their margins by half of 16px.

I made circle one have no border radius and no margin so you can see how the upper left corner of the element is what follows the line.

$(document).ready(function() {
                // FIRST CIRCLE
                $(".circle-1").animate({left: '0%', top: '0%'}, 5000);
                $(".circle-1").animate({left: '100%', right: '0', top: '50%'}, 5000);
                $(".circle-1").animate({left: '0', right: '0', top: '100%'}, 5000);
                $(".circle-1").animate({left: '100%', right: '0', top: '0'}, 5000);
                $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, 5000);
                // SECOND CIRCLE
                $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, 5000);
                $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, 5000);
                $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, 5000);
                $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, 5000);
                $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, 5000);
                // THIRD CIRCLE
                $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, 5000);
                $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, 5000);
                $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, 5000);
                $(".circle-3").animate({left: '50%', right: '0', top: '0%'}, 5000);
                $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, 5000);
            });
html{
  width:100%;
  height:100%
}

body{
  width:100%;
  height:100%;
  overflow: hidden
}

.page{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    /*background-image: url('../images/grid.svg');*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #0099ff; /* Old browsers */
    background-color: -moz-linear-gradient(top, #0099ff 0%, #085c8b 100%); /* FF3.6-15 */
    background-color: -webkit-linear-gradient(top, #0099ff 0%,#085c8b 100%); /* Chrome10-25,Safari5.1-6 */
    background-color: linear-gradient(to bottom, #0099ff 0%,#085c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff', endColorstr='#085c8b',GradientType=0 ); /* IE6-9 */
}

.page .logo{
    width: 257px;
    height: 54px;
    background-image: url(../images/logo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 40px;
    left: 120px;
}

.content{
    color: white;
    position: relative;
    width: 100%;
    text-align: center;
}

.content .title{
    font-weight: 100;
    font-size: 72px;
}

.content .sub-title{
    font-size: 28px;
}

.page .lines{
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page .anim-elem{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
}

.page .anim-elem .circle{
    display: flex;
    align-items: center;
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
    width: 32px;
    height: 32px;
    border-radius: 100%;
   /* transform: translate(-32px);*/
    margin: -16px -16px
}

.page .anim-elem .circle:after{
    content: '';
    background: white;
    content: '';
    background: white;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    position: absolute;
    margin: 8px 8px;
    left: 0;
    right: 0;
}

.page .anim-elem .circle.circle-1{
    top: 100%;
    left: 50%;
    border-radius: 0% !important;
    margin:0 !important;
}

.page .anim-elem .circle.circle-2{
    top: 100%;
    left: 0%;

}

.page .anim-elem .circle.circle-3{
    top: 100%;
    left: 100%;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">

    <div class="lines">

        <svg height="100%" width="100%">
            <!-- TOP LEFT -->
            <line x1="0" y1="0" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="0" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="0" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="0" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <!-- TOP RIGHT -->
            <line x1="100%" y1="0" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="100%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="50%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="75%" y1="100%" x2="100%" y2="0" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <!-- TOP FIRST -->
            <line x1="25%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="25%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <!-- TOP SECOND -->
            <line x1="50%" y1="0" x2="0" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="50%" y1="0" x2="25%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="50%" y1="0" x2="75%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="50%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <!-- TOP THIRD -->
            <line x1="75%" y1="0" x2="50%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="75%" y1="0" x2="100%" y2="100%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <!-- BOTTOM LINES -->
            <line x1="0" y1="100%" x2="100%" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
            <line x1="100%" y1="100%" x2="0" y2="50%" style="stroke:rgb(255, 255, 255);stroke-width:1" />
        </svg>

    </div>   

    <div class="anim-elem">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>

    </div> 

    </div>

Upvotes: 0

Shanil Fernando
Shanil Fernando

Reputation: 1322

when you say left it means left of the bounding rectangle of the circle. not the left of center point of the circle. You need to consider the width of the circle. E.g. center of the circle is the left+width/2.

I strongly recommend you to use SVG <animateMotion> which can be used to animate a object along a specific path.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"  version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">
<g id="layer1">
<path id="theMotionPath" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m471.58 15.998-208.95 112.12-72.99-65.317-17.35 113.79-22.59 12.12-132.16-168.08-0.79 0.612 132.06 167.95-146.61 78.67 119.18 242.64l-18.807 123.33-79.902 32.35 0.375 0.92774 79.352-32.127-35.748 234.45 0.90039 0.36719 136.85-190.29 156.91 319.46 224.67-253.79 120.3 153-12.31-275 53.88-60.86-58.97-52.77-4.92-110.01 45.38-18.38-49.34-69.9-12.42-277.5-92.59 128.74-103.41-146.5zm-0.3 1.299 103.1 146.06-106.66 148.29-204.29-182.82 207.85-111.53zm195.43 19.385 12.22 273.07-103.33-146.39 91.11-126.68zm-476.35 28.097 71.34 63.841-88.3 47.38 16.96-111.22zm72.133 64.551 204.65 183.13-105.16 146.22-194.06-246.8 5.2832-34.65 89.281-47.906zm312.5 34.889 104.03 147.38 3.9082 87.275-81.055 32.816l-133.41-119.38 106.51-148.1zm-402.88 13.609-5.0293 32.98-16.746-21.297 21.775-11.684zm-22.67 12.16 17.43 22.17-45.23 296.61-118.12-240.48 145.92-78.3zm18.279 23.248 193.66 246.29-70.545 98.09-121.11 49.033-47.305-96.309 45.303-297.1zm512.37 99.875 47.713 67.592-43.891 17.77-3.8223-85.361zm-212.2 0.0195 132.95 118.97-197.03 79.77-41.184-52.377 105.27-146.37zm215.08 86.799 4.8672 108.69-85.139-76.188 80.271-32.5zm-81.305 32.918 86.234 77.168 5.0508 112.8l-106.92 120.79-181.57-230.92 197.22-79.85zm-239.65 27.496 40.826 51.92-110.27 44.646 69.447-96.566zm326.93 50.605 57.494 51.449-52.533 59.344-4.9609-110.79zm-566.79 1.1211 46.639 94.951-65.139 26.373 18.5-121.32zm281.34 1.0117 181.86 231.29-223.8 252.81-156.49-318.59 86.414-120.16 112.01-45.35zm-113.75 46.055-85.176 118.44-34.396-70.027 119.57-48.408zm-120.5 48.785 34.664 70.57-135.95 189.03 35.525-232.98 65.758-26.623zm523.78 16.34 12.12 270.86-118.49-150.71 106.37-120.15z" fill-rule="evenodd"/>
</g>





<circle cx="" cy="" r="10" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="30s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>


</svg>

Upvotes: 3

Related Questions