How to convert this unrecognizable CSS feature into javascript?

Question

I have this problem where I am trying to move a CSS image in correspondence to time but can not use it because it is in CSS. The feature is not the sun, but that yellowish half-circle animation that can be seen in this pen. I am trying to apply that half circle to a completely random shape.

For instance, if the shape is completely random and is on a white canvas and there is a random deformed circle in the middle, then how to fill that circle with the same animation as seen in this pen and how to convert that CSS to javascript or how to control the CSS, because it has to stop and move when certain values are set in.

I do not expect someone to do the whole thing, but rather maybe assist on where I should start when I need to use that yellowish feature as seen in that pen.

Thank you.

Here is the thing.

<div class="sunmoon">
    <h2>Sun &amp; Moon</h2>
    <div class="sun-times">
        <div class="sun-path">
            <div class="sun-animation"></div>
        </div>
        <div class="sun-symbol-path"><span class="symbol">☀</span></div>
    </div>
    <div class="legend">
        <div class="sunrise">05:30 AM</div>
        <div class="sunset">8:04 PM</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>

<div class="controls">
  <button class="start">Start</button>
  <button class="reset">Reset</button>
</div>

@import "compass/css3";


$arc-diameter: 170px;

.sunmoon {
    position: relative;
    & > div {
        margin-left: 10px
    }
}


.sun-times {
    margin-top: 40px;
    width: 230px;
    height: 60px;
    border-bottom: 1px solid #999;
    overflow-y: hidden;

    .sun-path {
        margin-left: 25px;
        width: $arc-diameter;
        height: $arc-diameter;
        overflow: hidden;
        border: 1px dashed #999;
        border-radius: 50%;
    }

    .sun-symbol-path {
        position: absolute;
        color: yellow;
        text-shadow: 0 0 5px black;
        height: $arc-diameter / 2;
        -webkit-transition: -webkit-transform 2s linear;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateZ(-75deg);
        left: ($arc-diameter / 2) + 25px;
        bottom: 0;

        .symbol {
            position: relative;
            font-size: 16px;
            top: -8px;
        }
    } 

    .sun-animation {
        width: 0px;
        height: 150px;
        background-color: rgba(255, 255, 0, 0.4);
        -webkit-transition: width 2s linear;
        transition: width 2s linear;
    }
}


.legend {
    position: absolute;
    bottom: 1em;

    & > div {
        position: absolute;
        font-size: 12px;
        width: 80px;
    }

    .sunrise {
        left: 15px;
    }

    .sunset {
        left: 185px;
    }
}

body {
  background-image: url(foo);
  background-color: #ccc;
  font-family: Helvetica, Sans serif;
  h2 {
    font-size: 20px;
  }
}

.controls {
  margin-top: 50px;
}




$('.start').click(function () {
    $('.sunmoon .sun-animation').css('width', '70%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(27deg)');
        // TODO: mention that this isn't nice
        // city.find('.sunmoon .sun-animation').css('-webkit-transform',    'scaleX(50)');
    return false;
});

$('.reset').click(function () {
    $('.sun-animation').css('width', '0%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(-75deg)');
    return false;
});

Answer 1

The example you've attached uses two divs, and outer and an inner, to create this effect. The outer div has a border radius property to make it look like a half circle. The inner div is a normal rectangle with overflow set to hidden. So the script creates the optical illusion of wiping to the right by animating the width of the inner div going from 0% of the outer div to 70%. To make this illusion work with a polygon, you would need to use something like clip-path instead of border-radius.

Here is an example of an arbitrary polygon, that will wipe right with a different background color. HTML:

<div>
<div class="outer"><div class="inner"></div></div>
</div>

CSS:

.outer { 
  margin-left:200px;
  background-color: lightgray;
  width: 300px;
  height: 100px;
  display: block;
  overflow: hidden;
  -moz-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  -webkit-clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
  clip-path: polygon(0px 0px, 300px 0px, 300px 300px);
}
.inner  {
  background-color: red;
  width :0;
  height: 300px;
  display: block;
}

jQuery:

$('.outer').click(function() {
    $('.inner').animate({width:"150px"}, 1800)
}); 

Here is a working fiddle: https://jsfiddle.net/r93pocgt/

My implementation uses jQuery's animate to change the CSS property for width, when you click on the outer div. I've done my best to simplify it to make it clear what's doing what.

Answer 2

Well, I had some fun figuring this one out. Not sure that's what you wanted but it's what I've got. Plain JS.

var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");

var ctx = c1.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.lineWidth = 2;
ctx.stroke();

animateCanvas();

function animateCanvas(){
  var w = 0;
  var timer = setInterval(function(){
    c2.width = w;
    w += 1;
        var ctx = c2.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 89, 0, 2 * Math.PI);
        ctx.fillStyle = "#efba32";
        ctx.fill();
    if (w===200){clearInterval(timer)}
  }, 20);
}

.canvases{
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="canvas1" class="canvases" width="200" height="200"></canvas>
<canvas id="canvas2" class="canvases" width="200" height="200"></canvas>

Answer 3

You can achieve it creating a shape in Illustrator with the inside transparent and the outside in the color that you want, and setting another box (with a new color, in this case yellow, and the same width of the shape), underneath that shape (e.g. using z-index) with position:absolute and left:-100%, and onClick, start and stop the transition to right.

I'll recommend you to use GSAP TimeLineMax. It lets you play and stop the transition with its functions, e.g.:

    //off course after document load.
    let animation = new TimelineMax();
    animation
     .to(
          ".underneath-box", //box class
          10, //seconds
          { 
            left:"100%", //100% of the width
            ease: Power4.easeInOut //ease effect.
          });

    animation.pause(); //To prevent start.

    $('start-button').click(function(){ //on start button click
        animation.play().timeScale(1); //start animation
    });


    $('reset-button').click(function(){ //on reset button click
        animation.reverse().timeScale(2); //reverse the entire animation
    });

I'm assuming that you know some Html, and css basics. Don't forget to create those divs and buttons with its classes. Cheers.