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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
  /*
* CSSPlugin
* Visit http://createjs.com/ for documentation, updates and examples.
*
* Copyright (c) 2010 gskinner.com, inc.
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/

/**
* @module TweenJS
*/

this.createjs = this.createjs||{};

(function() {
	"use strict";

	/**
	 * A TweenJS plugin for working with numeric CSS string properties (ex. top, left). To use simply install after
	 * TweenJS has loaded:
	 *
	 * 	createjs.CSSPlugin.install();
	 *
	 * CSSPlugin works with almost any style property or unit. It identifies CSS values by looking for an initial value
	 * on the element's `style` object. It also uses this initial value to parse out the units to use with that value.
	 * 
	 * In the following example, `top` would be tweened as a style using `em` units using CSSPlugin, but `width` 
	 * would be not be tweened as a style (because there is no initial inline style value for it).
	 *
	 * 	myEl.style.top = "10em";
	 * 	createjs.Tween.get(myEl).to({top:20, width:100}, 1000);
	 *
	 * CSSPlugin can also use computed styles. Please see {{#crossLink "AbstractTween/compute:property"}}{{/crossLink}}
	 * for more information.
	 * 
	 * CSSPlugin has specific handling for the `transform` style, and will tween any transforms as long as their operations
	 * and units match. For example:
	 * 
	 * 	myEl.style.transform = "translate(20px, 30px)";
	 * 	createjs.Tween.get(myEl)
	 * 		.to({transform: "translate(40px, 50px)"}, 900) // would be tweened, everything matches
	 * 		.to({transform: "translate(5em, 300px)"}, 900) // would NOT be tweened, different units (px vs em)
	 * 		.to({transform: "scaleX(2)"}, 900) // would NOT be tweened, different operations (translate vs rotate)
	 * 
	 * You can also use `*` to copy the operation at that position from the previous transform.
	 * 
	 * 	myEl.style.transform = "translate(0px, 0px) rotate(0deg)";
	 * 	createjs.Tween.get(myEl)
	 * 		.to({transform: "translate(50px, 50px) *"}, 900) // would copy the "rotate" operation
	 * 		.to({transform: "* rotate(90deg)"}, 900) // would copy the "translate" operation
	 * 
	 * Please note that the CSS Plugin is not included in the TweenJS minified file.
	 * @class CSSPlugin
	 * @constructor
	 **/
	function CSSPlugin() {
		throw("CSSPlugin cannot be instantiated.")
	}
	var s = CSSPlugin;

// static properties
	/**
	 * @property priority
	 * @protected
	 * @static
	 **/
	s.priority = 100; // high priority, should read first and write last
	
	/**
	 * READ-ONLY. A unique identifying string for this plugin. Used by TweenJS to ensure duplicate plugins are not installed on a tween.
	 * @property ID
	 * @type {String}
	 * @static
	 * @readonly
	 **/
	s.ID = "CSS";
	
	/**
	 * READ-ONLY.
	 * @property VALUE_RE
	 * @type {RegExp}
	 * @static
	 * @readonly
	 */
	s.VALUE_RE = /^(-?[\d.]+)([a-z%]*)$/; // extracts the numeric value and suffix from a single CSS value
	
	s.TRANSFORM_VALUE_RE = /(?:^| |,)(-?[\d.]+)([a-z%]*)/g; // extracts the numeric value and suffix from comma delimited lists
	
	s.TRANSFORM_RE = /(\w+?)\(([^)]+)\)|(?:^| )(\*)(?:$| )/g; // extracts the components of a transform
	
	
	
	/**
	 * By default, CSSPlugin uses only inline styles on the target element (ie. set via the style attribute, `style` property, or `cssText`)
	 * to determine which properties should be tweened via CSS, and what units to use.
	 * 
	 * Setting `compute` to `true` causes CSSPlugin to use `getComputedStyle` for this purpose. This has the advantage of
	 * including all styles that effect the target element, however there are some important considerations for its use:<UL>
	 * 	<LI> `getComputedStyle` is computationally expensive, which could lead to performance issues if you are creating a large
	 * 	number of tweens at once.
	 * 	<LI> styles are normalized. For example, a width value specified as a `%` may be computed as `px`, which CSSPlugin will
	 * 	use for the tween. Different browsers _may_ normalize values differently.
	 * 	<LI> there are a large number of computed styles, which increases the chance that a property will be identified as a style.
	 * 	<LI> does not work with IE8 or below.
	 * 	</UL>
	 * 	
	 * 	The `compute` setting can be overridden on a per-tween basis by setting `tween.pluginData.CSS_compute`. For example,
	 * 	to enable computed styles for a new tween, you could use:
	 * 	
	 * 		createjs.Tween.get(el, {pluginData:{CSS_compute:true}}).to({top:20}, 1000);
	 * 	
	 * 	Given the considerations for `compute`, it is recommended that you keep the default global setting of `false` and override it
	 * 	in specific cases via `pluginData`.
	 * @property compute
	 * @type {Boolean}
	 * @default false
	 * @static
	 */
	s.compute = false;


// static methods
	/**
	 * Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin.
	 * @method install
	 * @static
	 **/
	s.install = function() {
		createjs.Tween._installPlugin(CSSPlugin);
	};

	/**
	 * Called by TweenJS when a new property initializes on a tween.
	 * See {{#crossLink "SamplePlugin/init"}}{{/crossLink}} for more info.
	 * @method init
	 * @param {Tween} tween
	 * @param {String} prop
	 * @param {any} value
	 * @return {any}
	 * @static
	 **/
	s.init = function(tween, prop, value) {
		var data = tween.pluginData;
		if (data.CSS_disabled || !(tween.target instanceof HTMLElement)) { return; }
		var initVal = value||getStyle(tween.target, prop, data.CSS_compute);
		if (initVal === undefined) { return;  }
		
		tween._addPlugin(CSSPlugin);
		var cssData = data.CSS || (data.CSS = {});
		if (prop === "transform") {
			cssData[prop] = "_t";
			return parseTransform(initVal);
		}
		
		var result = s.VALUE_RE.exec(initVal);
		if (result === null) {
			// a string we can't handle numerically, so add it to the CSSData without a suffix.
			cssData[prop] = "";
			return initVal;
		} else {
			cssData[prop] = result[2];
			return parseFloat(result[1]);
		}
	};

	
	/**
	 * Called when a new step is added to a tween (ie. a new "to" action is added to a tween).
	 * See {{#crossLink "SamplePlugin/step"}}{{/crossLink}} for more info.
	 * @method step
	 * @param {Tween} tween
	 * @param {TweenStep} step
	 * @param {Object} props
	 * @static
	 **/
	s.step = function(tween, step, props) {
		if (props.transform) {
			step.props.transform = parseTransform(step.props.transform, step.prev.props.transform);
		}
	};

	/**
	 * Called before a property is updated by the tween.
	 * See {{#crossLink "SamplePlugin/change"}}{{/crossLink}} for more info.
	 * @method change
	 * @param {Tween} tween
	 * @param {TweenStep} step
	 * @param {String} prop
	 * @param {any} value
	 * @param {Number} ratio
	 * @param {Boolean} end
	 * @return {any}
	 * @static
	 **/
	s.change = function(tween, step, prop, value, ratio, end) {
		var sfx = tween.pluginData.CSS[prop];
		if (sfx === undefined) { return; }
		if (prop === "transform") {
			value = writeTransform(step.prev.props[prop], step.props[prop], ratio);
		} else {
			value += sfx;
		}
		tween.target.style[prop] = value;
		return createjs.Tween.IGNORE;
	};
	
	
// private helper methods:
	function getStyle(target, prop, compute) {
		if (compute || (compute == null && s.compute)) {
			return window.getComputedStyle(target)[prop];
		} else {
			return target.style[prop];
		}
	}

	function parseTransform(str, compare) {
		var result, list = [false, str];
		do {
			// pull out the next "component" of the transform (ex. "translate(10px, 20px)")
			result = s.TRANSFORM_RE.exec(str);
			if (!result) { break; }
			if (result[3] === "*") {
				// reuse previous value:
				list.push(compare[list.length]);
				continue;
			}
			var component = [result[1]], compareComp = compare && compare[list.length];
			
			// check that the operation type matches (ex. "translate" vs "rotate"):
			if (compare && (!compareComp || component[0] !== compareComp[0])) {
				console.log("transforms don't match: ", component[0], compareComp&&compareComp[0]);
				compare=null;
			} // component doesn't match
			
			parseMulti(result[2], compareComp, component);

			list.push(component);
		} while(true);

		list[0] = !!compare;
		return list;
	}
	
	// this was separated so that it can be used for other multi element styles in the future
	// ex. transform-origin, border, etc.
	function parseMulti(str, compare, arr) {
		// TODO: add logic to deal with "0" values? Troublesome because the browser automatically appends a unit for some 0 values.
		do {
			// pull out the next value (ex. "20px", "12.4rad"):
			var result = s.TRANSFORM_VALUE_RE.exec(str);
			if (!result) { return arr; }
			if (!arr) { arr = []; }
			arr.push(+result[1], result[2]);

			// check that the units match (ex. "px" vs "em"):
			if (compare && (compare[arr.length-1] !== result[2])) { console.log("transform units don't match: ",arr[0], compare[arr.length-1], result[2]); compare=null;  } // unit doesn't match
		} while(true);
	}

	function writeTransform(list0, list1, ratio) {
		// check if we should just use the original transform strings:
		if (ratio === 1) { return list1[1]; }
		if (ratio === 0 || !list1[0]) { return list0[1]; }

		// they match, we want to apply the ratio:
		var str = "", l=list0.length, i, j, jl;
		for (i=2; i<l; i++) {
			var component0 = list0[i], component1 = list1[i];
			str += component0[0]+"(";
			for (j=1, jl=component0.length; j<jl; j+=2) {
				str += component0[j]+(component1[j]-component0[j])*ratio; // value
				str += component1[j+1] || component0[j+1]; // unit
				if (j < jl-2) { str += ", "; }
			}
			str += ")";
			if (i < l-1) { str += " "; }
		}
		return str;
	}
	
	/*
	
	// this was part of an attempt to handle multi element css values, ex. margin="10px 10px 20px 30px"
	// discarded because the browser likes to collapse values, which makes a generic solution infeasible.
	// for example, margin="10px 10px 10px 10px" will collapse to just "10px"
	// requires custom logic to handle each scenario.
	s.MULTI_RE = /((?:^| )-?[\d.]+[a-z%]*){2,}/; // matches CSS values that consist of two or more values with suffixes
	function writeMulti(arr0, arr1, ratio) {
		var str = "", l=arr0.length, i;
		for (i=0; i<l; i+=2) {
			str += arr0[i]+(arr1[i]-arr0[i])*ratio+arr0[i+1];
			if (i < l-2) { str += " "; }
		}
		return str;
	}
	
	// this method is really only needed for roundtrip tests.
	function writeSingleTransform(list) {
		var str = "", l=list.length, i, j, jl, component;
		for (i=2; i<l; i++) {
			component = list[i];
			str += component[0]+"(";
			for (j=1, jl=component.length; j<jl; j+=2) {
				str += component[j]+component[j+1];
				if (j < jl-2) { str += ", "; }
			}
			str += ")";
			if (i < l-1) { str += " "; }
		}
		return str;
	}
	*/
	
	createjs.CSSPlugin = s;

}());
</script>
<div class="container">
    <div class="rect"></div>
  </div>

              
            
!

CSS

              
                body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: #333;
}

.container {
    position: relative;
    width: 960px;
    height: 540px;
    background: #000;
}

.rect {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    background: white;
    top: 200px;
}
              
            
!

JS

              
                // プラグインのインストール
    createjs.CSSPlugin.install();
    // フレームレートを設定
    createjs.Ticker.framerate = 60;
    // 要素を取得
    var element = document.querySelector('.rect');
    element.style.left = '0px';
    createjs.Tween.get(element, {loop: true})
      .to({left: 800},
        3000, // ミリ秒
        createjs.Ease.cubicInOut // イージングの種類
      );

              
            
!
999px

Console