JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️
<header class="header">
Web Animations Demo
</header>
<div class="box" id="box"></div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFDF8;
}
.header {
background-color: #80C7D2;
border-bottom: 4px solid #3E888C;
padding: 20px;
color: #1C1208;
font-size: 18pt;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT";
}
.box {
width: 100px;
height: 100px;
background-color: #E15E5F;
position: absolute;
}
/*
* This is a demonstration of the Web Animations API.
* It uses the latest version of web-animations-next.min.js
* (v 2.1.2 at the time of writing). Feel free to fork and use this
* as a starting point for one of your own projects
*/
window.onload = function() {
var box = document.getElementById("box");
/*
* We'll start by moving the box to the middle of the page.
* First, let's get the coordinates
*/
var x = ((window.innerWidth/2) - (box.offsetWidth/4));
var y = ((window.innerHeight/2) - (box.offsetHeight));
/*
* To animate the box, we'll need to create a KeyframeEffect().
* This allows us to animate between a set of specific coordinates,
* or key frames. A KeyframeEffect takes 3 arguments:
*
* element - an object to animate
*
* keyframes - An array of keyframe values to animate between. Keyframes
* are objects that contain the properties you want to
* animate as keys, and the values you want to animate between
* as the values. In this case, we are changing the marginLeft
* from 0 to the centered width, and the marginTop from 0 to
* the centered height.
*
* AnimationEffectTiming - The AnimationEffectTiming object controls
* the way the properties are animated. In this case, we want the
* duration to last a total of 1 second (1000ms). We want it to
* stay put after it finishes animating, so we'll set the "fill"
* property to "forwards"
*/
var animCenter = new KeyframeEffect(
box,
[
{marginLeft:0, marginTop:0},
{marginLeft:x, marginTop:y}
],
{duration:1000, fill:"forwards"}
);
/*
* At this point, we've only defined the animation. Now we have to play it!
* To do this, we simply reference the document's timeline and tell it
* to play our animation
*/
document.timeline.play(animCenter);
}
Also see: Tab Triggers