Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2>Custom Animation Demo</h2>
<p>You can manipulate the animation of the box with the function. I think it's most interesting when you add the function together multiple times.</p>
F(X) = <table class="equation">
  <tr>
    <td class="numerator">(End Unit - Start Unit)</td>
  </tr>
  <tr>
    <td>(End Time)<sup>Acceleration Modifier</sup> - (Start Time)<sup>Acceleration Modifier</sup></td>
  </tr>
</table>X +<table class="equation">
  <tr>
    <td class="numerator">[(Start Unit) * (End Time)<sup>Acceleration Modifier</sup>] - [(End Unit) * (Start Time)<sup>Acceleration Modifier</sup>]</td>
  </tr>
  <tr>
    <td>(End Time)<sup>Acceleration Modifier</sup> - (Start Time)<sup>Acceleration Modifier</sup></td>
  </tr>
</table>
<p>For a constant rate set the acceleration modifier equal to 1.</p>
<table class="input">
  <tr>
    <th>Start Unit</th>
    <th><input class='start-unit' type='number' value="0"/></th>
  </tr>
  <tr>
    <th>End Unit</th>
    <th><input class='end-unit' type='number' value="200"/></th>
  </tr>
  <tr>
    <th>Start time <sub>(in seconds)</sub></th>
    <th><input class='start-time' type='number' value="0"/></th> 
  </tr>
  <tr>
     <th>End time <sub>(in seconds)</sub></th>
    <th><input class='end-time' type='number' value="1"/></th> 
  </tr>
  <tr>
    <th>Acceleration Modifier</th>
    <th><input class='accel-mod' type='number' value="1"/></th>
  </tr>
  <tr>
    <th>FPS <sub>(must be <= 100)</sub></th>
    <th><input class='fps' type='number' value="60"/>
  </tr>
  <tr>
    <th>Unit</th>
    <th><select>
      <option class="unit">px</option>
      <option class="unit">rem</option>
      <option class="unit">vh</option>
      <option class="unit">vw</option>
      </select></th>
  </tr>
  <tr> 
    <th><button onclick="start()">Animate</button></th>
  </tr>
</table>
<br>
<div class="box"></div>
              
            
!

CSS

              
                .numerator {
  border-bottom: 1px solid black;
}
.equation {
  display: inline-block;
  vertical-align: middle;
}
.equation td {
  text-align: center;
}
.input {
  margin-top: 1.5rem;
}
.box {
 position: relative;
 height: 6rem;
 width: 6rem;
 background-color: red;
}
.error {
  color: red;
}
              
            
!

JS

              
                var secondsPerFrame;
var unit = "px";

var start = function () {
    //Remove previous errors
    $('.error').remove();
    //Grab input
    var startUnit, endUnit, startTime, endTime, accelMod;
    startUnit = Number($('.start-unit').val());
    endUnit = Number($('.end-unit').val());
    startTime = Number($('.start-time').val());
    endTime = Number($('.end-time').val());
    accelMod = Number($('.accel-mod').val());
    secondsPerFrame = Math.pow($('.fps').val(), -1);
    unit = $('.unit:selected').val();
    //Check constraints
	if (meetsConstraints(startUnit, endUnit, startTime, endTime, accelMod)){
	    $('button').attr('disabled', 'disabled');
		animate(startUnit, endUnit, startTime, endTime, accelMod)
    }
}

var meetsConstraints = function (startUnit, endUnit, startTime, endTime, accelMod) {
    var isUndefined = (startUnit === "" || endUnit === "" || startTime === "" || endTime === "" || accelMod === "");
    var isNonNumber = (isNaN(secondsPerFrame) || isNaN(startUnit) || isNaN(endUnit) || isNaN(startTime) || isNaN(endTime) || isNaN(accelMod));
    var variableConstraints = (startUnit < 0 || startTime < 0 || startTime > endTime || startUnit > endUnit || startTime == endTime || secondsPerFrame > endTime || secondsPerFrame < 0.01);
    if (isUndefined || isNonNumber || variableConstraints) {
        error("Your input does not meet the constraints");
        return false;
    }
    return true;
}

var animate = function (a, b, c, d, n) {
    //Starts at 1 to ensure that x doesnt equal zero when n < 1 (constraint)
    var secondTracker = 1;
    c += 1;
    d += 1;
    //Start loop
    animation = setInterval(function () {
        secondTracker += secondsPerFrame;
        //When we hit the end time... stop
        if (secondTracker >= d) {
            stopAnimation();
            return;
        }
        //When we hit the start time... start
        if (secondTracker >= c) {
            $('.box').css("left", animationFunction(a, b, c, d, n, secondTracker) + unit);
        }
    }, secondsPerFrame * 1000);
};

/*
    a = Starting Unit
    b = Ending Unit
    c = Animation Start (in seconds)
    d = Animation End (in seconds)
    n = Rate at which the element moves
    x is the current time in the animation 
*/
var animationFunction = function (a, b, c, d, n, x) {
    var x = Math.pow(x, n);
    var m = (b - a) / (Math.pow(d, n) - Math.pow(c, n));
    var k = (a * Math.pow(d, n) - b * Math.pow(c, n)) / (Math.pow(d, n) - Math.pow(c, n));
    return m * x + k
};

var stopAnimation = function () {
    clearInterval(animation);
    $('button').removeAttr('disabled');
};

var error = function (msg) {
    $('body').append("<p class='error'>" + msg + "</p>")
}
              
            
!
999px

Console