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

              
                <svg id="logoSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-37.4 94 670.1 653.9" xml:space="preserve">
    <path class="component__icon__spinner--7L" d="M214 494.6c-20.7 0-43.6-1.7-62.8-3.4 -2.6-0.2-4.6-0.4-5.9-0.5 -2-0.2-6.1-0.3-11.2-0.5C88.8 488.7 45 485.6 31.3 474 16.5 461.4-1 404.6 0 372.8c0.4-12.2 3.5-20.5 9.1-24.7 16.5-12.3 81.2-12.2 135.6-10.7 2.8 0.1 5.1 0.1 7 0.2 3.6 0.1 8.9 0 15-0.1 44.5-0.7 93 0.2 106 18.7 12 17.2 15.5 72.2 6.7 105.1 -3.8 14.2-9.6 23.3-17.1 26.8C251.9 493 234.1 494.6 214 494.6zM12.1 352.2l3 4c-1.7 1.3-4.7 5.2-5 17 -1 30.7 16.2 83.3 27.8 93.2 12.9 11 73.7 13 96.6 13.8 5.4 0.2 9.3 0.3 11.6 0.5 1.4 0.1 3.4 0.3 6.1 0.5 21 1.9 85.1 7.7 105.8-2.1 4.6-2.2 8.8-9.4 11.7-20.3 3.8-14.4 5.4-34.9 4.2-54.9 -1.2-19.2-4.8-35.2-9.4-41.8 -11-15.8-69.5-14.9-97.6-14.5 -6.2 0.1-11.6 0.2-15.4 0.1 -1.9 0-4.2-0.1-7-0.2 -75.3-2.1-118.9 0.9-129.4 8.7L12.1 352.2z"/>
    <path class="component__icon__spinner--7R" d="M381.3 494.6c-20.1 0-38-1.6-48.2-6.4 -7.6-3.5-13.3-12.6-17.1-26.8 -8.8-32.9-5.3-87.9 6.7-105.1 13-18.6 61.5-19.4 106-18.7 6.1 0.1 11.4 0.2 15 0.1 1.8 0 4.2-0.1 7-0.2 103.7-2.8 127 4.2 135.6 10.7 5.6 4.2 8.7 12.5 9.1 24.7 1.1 31.8-16.5 88.5-31.3 101.1 -13.6 11.6-57.5 14.7-102.8 16.2 -5.1 0.2-9.1 0.3-11.2 0.5 -1.3 0.1-3.4 0.3-5.9 0.5C424.9 492.9 401.9 494.6 381.3 494.6zM409.8 347.4c-29.9 0-70.1 1.8-79.1 14.6 -4.6 6.6-8.2 22.7-9.4 41.8 -1.2 20 0.4 40.5 4.2 54.9 2.9 11 7.1 18.2 11.7 20.3 20.7 9.7 84.8 4 105.8 2.1 2.6-0.2 4.7-0.4 6.1-0.5 2.2-0.2 6.2-0.3 11.6-0.5 22.9-0.8 83.8-2.9 96.6-13.8 11.6-9.9 28.8-62.5 27.8-93.2 -0.4-11.8-3.3-15.7-5-17 -10.5-7.8-54.1-10.8-129.4-8.7 -2.8 0.1-5.2 0.1-7 0.2 -3.8 0.1-9.2 0-15.4-0.1C423.1 347.5 416.8 347.4 409.8 347.4z"/>
    <path class="component__icon__spinner--6L" d="M190.8 509.6c-5.2 0-9.4-0.2-12.1-0.4 -2.8-0.2-6.2-0.5-10.1-0.7 -20.8-1.3-52.2-3.3-65.1-13.9 -17.2-14.1-47.9-48.9-53.8-89.6 -2.8-19.5-4.2-34.9-2-46.9 2.1-11.4 7.3-19.8 17.8-29.2 19.2-17.1 44.3-19.2 110.3-17.2 59.9 1.9 69 8.1 81.1 19.8l1.2 1.1c13.2 12.6 24.2 67.6 25.5 92.1 1.6 29.8-3.2 53.1-14 67.5C258.9 506.3 214.6 509.6 190.8 509.6zM140.9 321c-38 0-55.6 3.6-68.7 15.3l0 0c-16.4 14.6-18.6 25.9-12.6 67.2 5.5 37.7 34.1 70.1 50.2 83.4 10.5 8.6 41.1 10.5 59.4 11.7 4 0.2 7.4 0.5 10.3 0.7 20.3 1.7 73.9-2.1 82.1-13 9.4-12.5 13.5-33.6 12-61 -1.8-33.5-14.6-77.9-22.5-85.4l-1.2-1.1c-9.5-9.1-15.7-15.1-74.5-17C162.3 321.3 150.9 321 140.9 321z"/>
    <path class="component__icon__spinner--6R" d="M404.5 509.6c-23.8 0-68.2-3.2-78.8-17.4 -10.8-14.4-15.6-37.7-14-67.5 1.4-24.5 12.3-79.5 25.5-92.1l1.2-1.1c12.1-11.7 21.3-17.9 81.1-19.8 65.9-2.1 91.1 0.1 110.3 17.2l0 0c20.3 18.1 21.8 34.9 15.8 76.1 -5.9 40.7-36.6 75.5-53.8 89.6 -13 10.7-44.4 12.6-65.1 13.9 -3.9 0.2-7.3 0.5-10.1 0.7C413.9 509.4 409.7 509.6 404.5 509.6zM454.4 321c-10 0-21.4 0.2-34.6 0.7 -58.8 1.9-65.1 7.9-74.5 17l-1.2 1.1c-7.8 7.5-20.6 51.9-22.5 85.4 -1.5 27.4 2.6 48.5 12 61 8.2 10.9 61.8 14.8 82.1 13 2.9-0.2 6.3-0.5 10.3-0.7 18.3-1.1 49-3.1 59.4-11.7 16.1-13.2 44.8-45.6 50.2-83.4 6-41.2 3.8-52.5-12.6-67.2l0 0C510 324.6 492.4 321 454.4 321z"/>
    <path class="component__icon__spinner--5L" d="M231.6 480.7c-11.4 0-24.1-1.2-36.9-2.7 -3.6-0.4-6.4-0.8-7.9-0.8l-1.8-0.1c-40-1.9-62.2-6.5-69.9-14.4 -9.9-10.2-16.8-32.5-20.1-50.1 -2.1-11.2-5.9-38.3 3.2-47.8 15.7-16.4 53.9-15.4 79.2-14.8 5.1 0.1 9.5 0.2 12.6 0.2h1.7c30.2-0.9 59.9-0.4 72.9 9 9.3 6.7 12.6 30.9 13.6 44.7 1.6 19.8 1.2 56.2-10 67.4C260.9 478.4 247.7 480.7 231.6 480.7zM161.1 359.8c-20.5 0-45.9 1.7-55.7 12 -3.2 3.3-4.4 18.1-0.6 39 3.7 19.9 10.6 38 17.4 44.9 3.2 3.3 15.6 9.1 63.2 11.4l1.8 0.1c1.8 0.1 4.7 0.4 8.6 0.9 15 1.8 54.9 6.4 65.2-3.9 6.2-6.1 9.3-32.3 7.1-59.6 -1.9-23.8-6.7-35.4-9.5-37.4 -12.1-8.7-50.4-7.6-66.8-7.1h-1.7c-3.4 0.1-7.9 0-13.1-0.2C172.5 359.9 167 359.8 161.1 359.8z"/>
    <path class="component__icon__spinner--5R" d="M363.6 480.7c-16.1 0-29.4-2.3-36.5-9.4 -11.3-11.2-11.6-47.7-10-67.4 1.1-13.8 4.3-38 13.6-44.7 13-9.4 42.7-9.9 72.9-9h1.7c3.1 0.1 7.5 0 12.6-0.2 25.3-0.6 63.5-1.6 79.2 14.8 9.1 9.5 5.3 36.6 3.2 47.8 -3.2 17.5-10.2 39.9-20.1 50.1 -7.7 7.9-29.9 12.5-69.9 14.4l-1.8 0.1c-1.5 0.1-4.3 0.4-7.9 0.8C387.7 479.5 375 480.7 363.6 480.7zM385.2 359.8c-17.9 0-40 1.2-48.6 7.4 -2.8 2-7.6 13.6-9.5 37.4 -2.2 27.3 1 53.4 7.1 59.6 10.4 10.3 50.2 5.6 65.2 3.9 3.9-0.5 6.8-0.8 8.6-0.9l1.8-0.1c47.6-2.3 60.1-8.1 63.2-11.4 6.7-6.9 13.7-25 17.4-44.9 3.8-20.9 2.6-35.7-0.6-39l0 0c-12.6-13.2-51.1-12.2-71.7-11.7 -5.3 0.1-9.8 0.2-13.1 0.2h-1.7C398.7 360 392.3 359.8 385.2 359.8z"/>
    <path class="component__icon__spinner--4L" d="M207.9 470.8c-18 0-41.6-1.6-47.7-9.8 -8.6-11.4-14.3-52.5-10.4-74.4 1.4-7.5 3.7-12.2 7.1-14.4 8-5.2 33.5-8.6 54.6-9.4 17-0.6 47.1-0.2 58.1 9.8 11 10.1 14.8 36.1 13.6 57.4 -0.4 7.7-2.2 26.3-9.7 31.7 -7 5.1-33.8 8.4-56.7 9C214.1 470.7 211.1 470.8 207.9 470.8zM221.7 368.5c-3.2 0-6.5 0.1-9.9 0.2 -25.5 1-46.2 5.1-51.6 8.5l0 0c-0.9 0.6-3 2.7-4.4 10.4 -3.7 20.4 1.5 59.5 9.3 69.7 3.2 4.2 20.4 8.1 51.7 7.2 27.3-0.8 48.9-4.7 53.3-7.9 3-2.2 6.4-11.4 7.3-27.2 1.1-19.9-2.6-44.3-11.7-52.7C259.6 371.5 243.6 368.5 221.7 368.5z"/>
    <path class="component__icon__spinner--4R" d="M387.4 470.8c-3.2 0-6.2-0.1-8.9-0.1 -22.9-0.6-49.7-3.9-56.7-9 -7.5-5.5-9.3-24-9.7-31.7 -1.2-21.3 2.6-47.3 13.6-57.4 10.9-10 41.1-10.4 58.1-9.8 21 0.8 46.5 4.3 54.6 9.4l0 0c3.4 2.2 5.8 6.9 7.1 14.4 4 21.9-1.8 63-10.4 74.4C428.9 469.1 405.4 470.8 387.4 470.8zM373.6 368.5c-21.9 0-38 3-43.9 8.4 -9.1 8.3-12.8 32.8-11.7 52.7 0.9 15.8 4.3 25 7.3 27.2 4.4 3.2 26 7.1 53.3 7.9 31.3 0.9 48.5-3 51.7-7.2 7.7-10.3 12.9-49.4 9.3-69.7 -1.4-7.8-3.6-9.9-4.4-10.4 -5.4-3.4-26.1-7.5-51.6-8.5C380.1 368.6 376.8 368.5 373.6 368.5z"/>
    <path class="component__icon__spinner--3L" d="M215.2 216.3v7c9.5 0 19.7 3.3 28.2 9 7 4.8 16.2 13.6 20.3 28.7 3.5 12.9 5.2 76.5 4.4 170 -0.7 80.6-2.8 150.4-3.9 156.7 -1.3 5.3-4.6 15.3-12.6 24 -10.5 11.3-25.8 17.1-45.6 17.1 -26.3 0-42.5-11.9-51.4-21.9 -10.2-11.5-16.6-27-16.6-40.6 0-30.4 6.2-283.2 10.8-300.1 4.7-17.3 25.4-37 61.3-42.3 1.6-0.2 3.3-0.4 5.1-0.4L215.2 216.3M215.2 216.3c-2.1 0-4.2 0.1-6.1 0.4 -40.5 6-62 28.9-67 47.4s-11 273.9-11 301.9c0 28 24 69.5 75 69.5s62.5-36 65-46.5c2.5-10.5 8.4-296.9-0.6-329.9C262.3 229.4 235.3 216.3 215.2 216.3L215.2 216.3z"/>
    <path class="component__icon__spinner--3R" d="M380.1 223.3c1.8 0 3.5 0.1 5.1 0.4 35.9 5.3 56.6 25.1 61.3 42.3 4.6 16.9 10.8 269.6 10.8 300.1 0 13.6-6.4 29.1-16.6 40.6 -8.9 10-25.1 21.9-51.4 21.9 -19.7 0-35.1-5.7-45.6-17.1 -8-8.7-11.4-18.7-12.6-24 -1.1-6.2-3.2-76-3.9-156.7 -0.8-93.5 0.9-157.1 4.4-170 4-14.9 13.3-23.8 20.3-28.5C360.3 226.6 370.6 223.3 380.1 223.3M380.1 216.3c-20.1 0-47.1 13-55.3 42.9 -9 33-3.1 319.4-0.6 329.9 2.5 10.5 14 46.5 65 46.5s75-41.5 75-69.5c0-28-6-283.4-11-301.9s-26.5-41.4-67-47.4C384.2 216.5 382.2 216.3 380.1 216.3L380.1 216.3z"/>
    <path class="component__icon__spinner--2L" d="M224.7 682.4c-2.7 0-4.4-0.2-4.5-0.3 -0.5-0.1-15-2.1-29.3-11.6 -13.4-8.9-29-26.3-27.9-58.4 0.5-13.9 0.9-40.5 1.4-74.1 0.8-52.6 1.8-124.5 4-187.3 2.6-74.9 6-120.6 10.7-139.6l0 0c3.1-12.9 19.8-50 54.9-51.8 15.3-0.8 27.7 8 35.9 25.4 5.7 12.1 7.3 24.2 7.5 25.2 7.4 50.7 9 358.4 0 416.3 -2.8 17.7-10.5 41-31.9 51.2C237.2 681.7 229.4 682.4 224.7 682.4zM188.8 213.5c-10.2 42-12.8 219-14.4 324.6 -0.5 33.7-0.9 60.4-1.4 74.4 -0.8 22 7.1 38.8 23.5 49.7 12.4 8.3 25 10 25.1 10 1.6 0.2 37.8 4.8 45.9-47.3 8.9-57.5 7.4-363.2 0-413.4v-0.1c-0.1-0.4-5.9-43.4-33-42C205 170.9 190.9 204.5 188.8 213.5L188.8 213.5z"/>
    <path class="component__icon__spinner--2R" d="M370.6 682.4c-4.7 0-12.5-0.7-20.8-4.7 -21.4-10.2-29.2-33.5-31.9-51.2 -9-57.9-7.4-365.7 0-416.4 0.1-1.1 1.8-13.2 7.5-25.2 8.2-17.4 20.6-26.2 35.9-25.5 35 1.8 51.8 38.8 54.9 51.7 10.4 43 13.1 220.8 14.6 326.9 0.5 33.7 0.9 60.2 1.4 74.1 1.2 32.1-14.5 49.4-27.9 58.4 -14.3 9.6-28.7 11.6-29.4 11.6C374.9 682.2 373.2 682.4 370.6 682.4zM359.5 169.4c-26.1 0-31.6 41.6-31.7 42v0.1c-7.4 50.2-8.9 355.9 0 413.4 3.5 22.3 12.3 37 26.3 43.8 10.1 4.8 19.4 3.6 19.5 3.6 2.1-0.3 50.5-7.5 48.7-59.8 -0.5-14-0.9-40.6-1.4-74.3 -1.6-105.8-4.2-282.7-14.4-324.7 -2.2-8.9-16.3-42.5-45.7-44C360.4 169.4 359.9 169.4 359.5 169.4z"/>
    <path class="component__icon__spinner--1L" d="M240.7 615.2c-16.7 0-37.3-8.2-48-44.1 -4.1-13.7-0.6-121.2 0.6-153.8 2.4-66.2 6.3-141.3 8.9-149.9 6.2-20.6 24-30.1 37.9-30.1 0.1 0 0.1 0 0.2 0 10.4 0 20.5 4.1 27.7 11.2 6.9 6.8 10.6 16 10.6 25.8 0 4.4 0 20-0.1 41.9 -0.1 74.8-0.3 230.4 0.1 254 0.5 29.4-10.1 43.3-34.3 44.9l0 0C243.1 615.1 241.9 615.2 240.7 615.2zM240.3 243.2c-0.1 0-0.1 0-0.2 0 -11.8 0.1-26.8 8.2-32.1 25.9 -2.1 6.9-6 73.5-8.6 148.4 -3 83.9-3.4 143.5-0.9 151.9 8.3 27.9 23.6 41.3 45.4 39.7l0 0c20.8-1.4 29.1-12.7 28.7-38.8 -0.4-23.8-0.2-179.4-0.1-254.1 0-21.9 0.1-37.4 0.1-41.9 0-8.2-3.2-15.8-8.9-21.5C257.6 246.6 249 243.2 240.3 243.2z"/>
    <path class="component__icon__spinner--1R" d="M354.6 615.2c-1.2 0-2.4 0-3.6-0.1l0 0c-24.2-1.7-34.8-15.5-34.3-44.9 0.4-23.7 0.2-179.3 0.1-254 0-21.9-0.1-37.5-0.1-41.9 0-9.8 3.8-18.9 10.6-25.8 7.2-7.2 17.3-11.2 27.7-11.2 0.1 0 0.1 0 0.2 0 13.9 0.1 31.7 9.5 37.9 30.1 2.6 8.6 6.5 83.7 8.9 149.9 1.2 32.6 4.7 140.1 0.6 153.8C391.9 606.9 371.3 615.2 354.6 615.2zM351.4 609.1c21.9 1.5 37.1-11.9 45.4-39.7 2.5-8.4 2.2-68.1-0.8-151.9 -2.7-74.9-6.6-141.5-8.6-148.4 -5.4-17.7-20.5-25.9-32.2-25.9 -8.9 0-17.5 3.4-23.6 9.5 -5.7 5.7-8.9 13.3-8.9 21.5 0 4.4 0 20 0.1 41.9 0.1 74.8 0.3 230.4-0.1 254.1C322.2 596.4 330.6 607.6 351.4 609.1L351.4 609.1z"/>
</svg>
              
            
!

CSS

              
                path{
    fill:#1C69D4;
}
              
            
!

JS

              
                /* globals Router, require, Easing, History, module */
"use strict"; // jshint ignore: line


/**
 * Spinner
 * @constructor
 */
var Spinner = module.exports = function($dom)
{
	CSSPlugin.useSVGTransformAttr = true;
	this.$ = $(this);
	this.$dom = $dom;
	this.init();
};

Spinner.SHOW_COMPLETE = 'showComplete';
Spinner.HIDE_COMPLETE = 'hideComplete';
Spinner.HIDE = 'hide';

Spinner.prototype =
{
	init: function()
	{

		this._$step1L = this.$dom.find('.component__icon__spinner--1L');
		this._$step2L = this.$dom.find('.component__icon__spinner--2L');
		this._$step3L = this.$dom.find('.component__icon__spinner--3L');
		this._$step4L = this.$dom.find('.component__icon__spinner--4L');
		this._$step5L = this.$dom.find('.component__icon__spinner--5L');
		this._$step6L = this.$dom.find('.component__icon__spinner--6L');
		this._$step7L = this.$dom.find('.component__icon__spinner--7L');

		this._$step1R = this.$dom.find('.component__icon__spinner--1R');
		this._$step2R = this.$dom.find('.component__icon__spinner--2R');
		this._$step3R = this.$dom.find('.component__icon__spinner--3R');
		this._$step4R = this.$dom.find('.component__icon__spinner--4R');
		this._$step5R = this.$dom.find('.component__icon__spinner--5R');
		this._$step6R = this.$dom.find('.component__icon__spinner--6R');
		this._$step7R = this.$dom.find('.component__icon__spinner--7R');

		this._timelineLeft = new TimelineMax({ delay:0.05, onComplete: $.proxy(this._onTimelineLeftComplete, this) });
		this._timelineRight = new TimelineMax({ delay:0.05, onComplete: $.proxy(this._onTimelineRightComplete, this) });

		var tD   = 0.833;
		var hD   = tD / 2;
		var dly1 = 0.125;
		var dly2 = 0.125;

		var xS = 15;
		var xE = 10;
		
		this._timelineLeft.addLabel('beginning');

		var opacityFrom = 0;
		var opacityTo   = 1;

		var scaleInit = 0.5;
		var scaleMax  = 1;
		var scaleBack = 0.9;

		var transformOriginLeft = "right center";
		var transformOriginRight = "left center";

		// viewbox -37.4 94 670.1 653.9
		var svgOriginCustom = (335.05 - 37.4) +' '+ (326.95 + 94);

		this._timelineLeft.fromTo(this._$step1L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft } );
		this._timelineLeft.fromTo(this._$step2L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1));
		this._timelineLeft.fromTo(this._$step3L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1*2));
		this._timelineLeft.fromTo(this._$step4L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1*3));
		this._timelineLeft.fromTo(this._$step5L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1*4));
		this._timelineLeft.fromTo(this._$step6L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1*5));
		this._timelineLeft.fromTo(this._$step7L, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft }, 'beginning+='+(dly1*6));

			this._timelineLeft.to(this._$step1L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(tD/3));
			this._timelineLeft.to(this._$step2L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1));
			this._timelineLeft.to(this._$step3L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1/2));
			this._timelineLeft.to(this._$step4L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1/2.1));
			this._timelineLeft.to(this._$step5L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1/2.2));
			this._timelineLeft.to(this._$step6L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1/2.3));
			this._timelineLeft.to(this._$step7L, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginLeft}, '-='+(hD - dly1/2.4));

				this._timelineLeft.fromTo(this._$step1L, hD*3.5, { x:xS },   { x:-xE }, 'beginning' );
				this._timelineLeft.fromTo(this._$step2L, hD*3.5, { x:xS-2 }, { x:-xE }, 'beginning+='+(dly1) );
				this._timelineLeft.fromTo(this._$step3L, hD*3.5, { x:xS-4 }, { x:-xE }, 'beginning+='+(dly1*2) );
				this._timelineLeft.fromTo(this._$step4L, hD*3.5, { x:xS-6 }, { x:-xE }, 'beginning+='+(dly1*3) );
				this._timelineLeft.fromTo(this._$step5L, hD*3.5, { x:xS-8 }, { x:-xE }, 'beginning+='+(dly1*4) );
				this._timelineLeft.fromTo(this._$step6L, hD*3.5, { x:xS-10 }, { x:-xE }, 'beginning+='+(dly1*5) );
				this._timelineLeft.fromTo(this._$step7L, hD*3.5, { x:xS-12 }, { x:-xE }, 'beginning+='+(dly1*6) );


		this._timelineRight.add('beginning', 0);


		this._timelineRight.fromTo(this._$step1R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight} );
		this._timelineRight.fromTo(this._$step2R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1) );
		this._timelineRight.fromTo(this._$step3R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1*2) );
		this._timelineRight.fromTo(this._$step4R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1*3) );
		this._timelineRight.fromTo(this._$step5R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1*4) );
		this._timelineRight.fromTo(this._$step6R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1*5) );
		this._timelineRight.fromTo(this._$step7R, hD, { opacity: opacityFrom, scale: scaleInit, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight }, { opacity: opacityTo,   scale: scaleMax, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, 'beginning+='+(dly1*6) );

			this._timelineRight.to(this._$step1R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(tD/3) );
			this._timelineRight.to(this._$step2R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1) );
			this._timelineRight.to(this._$step3R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1/2) );
			this._timelineRight.to(this._$step4R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1/2.1) );
			this._timelineRight.to(this._$step5R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1/2.2) );
			this._timelineRight.to(this._$step6R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1/2.3) );
			this._timelineRight.to(this._$step7R, hD, { opacity: opacityFrom, scale: scaleBack, svgOrigin: svgOriginCustom, transformOrigin: transformOriginRight}, '-='+(hD - dly1/2.4) );

				this._timelineRight.fromTo(this._$step1R, hD*3.5, { x:-xS }, { x:xE }, 'beginning' );
				this._timelineRight.fromTo(this._$step2R, hD*3.5, { x:-xS+2 }, { x:xE }, 'beginning+='+(dly1) );
				this._timelineRight.fromTo(this._$step3R, hD*3.5, { x:-xS+4 }, { x:xE }, 'beginning+='+(dly1*2) );
				this._timelineRight.fromTo(this._$step4R, hD*3.5, { x:-xS+6 }, { x:xE }, 'beginning+='+(dly1*3) );
				this._timelineRight.fromTo(this._$step5R, hD*3.5, { x:-xS+8 }, { x:xE }, 'beginning+='+(dly1*4) );
				this._timelineRight.fromTo(this._$step6R, hD*3.5, { x:-xS+10 }, { x:xE }, 'beginning+='+(dly1*5) );
				this._timelineRight.fromTo(this._$step7R, hD*3.5, { x:-xS+12 }, { x:xE }, 'beginning+='+(dly1*6) );

		this.stop('left');
		this.stop('right');
	},

	destroy: function()
	{
		this.$dom.remove();
		this.$.remove();
	},

	play: function(side)
	{
		if(side == 'left')
		{
			this.stop('left');
			this._timelineLeft.play();
		}
		if(side == 'right')
		{
			this.stop('right');
			this._timelineRight.play();
		}

		if(typeof side == 'undefined')
		{
			this.play('left');
			this.play('right');
		}

	},

	stop : function(side)
	{
		if(side == 'left')
		{
			this._timelineLeft.seek(0);
			this._timelineLeft.pause();
		}
		if(side == 'right')
		{
			this._timelineRight.seek(0);
			this._timelineRight.pause();
		}

		if(typeof side == 'undefined')
		{
			this.stop('left');
			this.stop('right');
		}
	},

	//-----------------------------------------------------o Private


	//-----------------------------------------------------o Handlers
	
	_onTimelineLeftComplete: function()
	{
		this.play('left');
	},	
	_onTimelineRightComplete: function()
	{
		this.play('right');
	}

};

var logo = new Spinner($('svg'));
logo.play();
              
            
!
999px

Console