CODEWITHSUNDEEP
javascriptjquerycsscss-animations
Kalim
Kalim

Reputation: 105

Animate dot after dot from an image using CSS3 or jQuery

I want to animate dot after dot from the below image but my problem is with the curved section of the image (bottom of the image).

animate dot after dot

At the start, all dots should be hidden and then one by one each dot should be animated into view.

I have the below code:

<div id="dots1"></div>

#dots1 {
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -webkit-transition: height 1s linear;
    transition: height 1s linear;
    position: absolute;
    left: 50%;
    z-index: 1;
    margin: 0 0 0 -1px;
    width: 3px;
    height: 0;
    background: url(image/pic.png) 0 0 no-repeat;
}

Upvotes: 4

Views: 1358

Answers (2)

Harry
Harry

Reputation: 89760

You can achieve this effect using two SVG path elements like in the below snippet. Two paths in the form of the curved line that you need is created. One path (which is at the bottom) has the dot pattern for the stroke (black colored) and another duplicate path which is on top. The duplicate path stroke is set such that for one full length of the path it is white in color and for another length it is transparent.

An animation is added on the duplicate path to animate stroke's offset. As offset is animated, the white portion of the stroke slowly moves out of view and the transparent portion starts coming into view. As the white portion starts going out of view, the black dots below it start getting revealed.

It is a bit complex to understand at start but once you get familiar with path, stroke-dasharray and stroke-dashoffset it will look simple.

svg {
  height: 400px;
}
path {
  fill: none;
}
path.dot {
  stroke: black;
  stroke-dasharray: 0.1 4;
  stroke-linecap: round;
}
path.top {
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-linecap: round;
  animation: dash 15s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -250;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox='0 0 100 100'>
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' />
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' />
</svg>

Upvotes: 6

spencer.sm
spencer.sm

Reputation: 20574

Try the following:

HTML

<div id="dots">
    <img src="https://i.sstatic.net/oxUh8.png">
</div>

jQuery

$("#dots").css("height", "514px");

CSS

#dots{
    overflow: hidden;
    height: 10px;
    transition: all 3s cubic-bezier(.5, 1, 0, .5);
}

See: https://jsfiddle.net/brezkryx/

Upvotes: 1

Related Questions