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

              
                
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Project Gallery Greensock Workshop</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="wrapper">
            <div class="projects">
               <div class="project project01">
                    <div class="project-image">
                     <img src="img/img_merry-christmallax.png" alt="">
                    <div class="project-pixels">
                        <div class="pixel pixel01 sizeS"></div>
                        <div class="pixel pixel02 sizeL"></div>
                        <div class="pixel pixel03 sizeXL"></div>
                        <div class="pixel pixel04 sizeM"></div>
                        <div class="pixel pixel05 sizeS"></div>
                        <div class="pixel pixel06 sizeL"></div>
                        <div class="pixel pixel07 sizeXL"></div>
                        <div class="pixel pixel08 sizeM"></div>
                        <div class="pixel pixel09 sizeS"></div>
                        <div class="pixel pixel10 sizeL"></div>
                        <div class="pixel pixel11 sizeM"></div>
                        <div class="pixel pixel12 sizeL"></div>
                        <div class="pixel pixel13 sizeXL"></div>
                        <div class="pixel pixel14 sizeM"></div>
                        <div class="pixel pixel15 sizeS"></div>
                        <div class="pixel pixel16 sizeL"></div>
                        <div class="pixel pixel17 sizeXL"></div>
                        <div class="pixel pixel18 sizeM"></div>
                        <div class="pixel pixel19 sizeS"></div>
                        <div class="pixel pixel20 sizexl"></div>
                        <div class="pixel pixel21 sizeM"></div> 
                        <div class="pixel pixel22 sizel"></div>
                    </div>
                </div>   
                        <h2 class="project-title">Merry Christmallax</h2>
                        <p class="button-container">
                            <a href="#" class="button">
                            <span class="bp bp-left"></span>
                            <span class="bp bp-mid"></span>
                            <span class="bp bp-right"></span>
                            <span class="bp-text"> View Project</span>
                            </a>
                        </p> 
                        <p class="project-subtitle">view the project</p>
                    </div>
                 </div>
                    <!-- Add another 2 projects -->
                    <div class="project project02">
                        <div class="project-image">
                            <img src="" alt="Happy 25th Birthday Game Boy" />
                            <div class="project-pixels">
                                <div class="pixel pixel01 sizeS"></div>
                                <div class="pixel pixel02 sizeXL"></div>
                                <div class="pixel pixel03 sizeL"></div>
                                <div class="pixel pixel04 sizeXL"></div>
                                <div class="pixel pixel05 sizeL"></div>
                                <div class="pixel pixel06 sizeS"></div>
                                <div class="pixel pixel07 sizeL"></div>
                                <div class="pixel pixel08 sizeS"></div>
                                <div class="pixel pixel09 sizeL"></div>
                                <div class="pixel pixel10 sizeS"></div>
                                <div class="pixel pixel11 sizeS"></div>
                                <div class="pixel pixel12 sizeS"></div>
                                <div class="pixel pixel13 sizeXL"></div>
                                <div class="pixel pixel14 sizeL"></div>
                                <div class="pixel pixel15 sizeXL"></div>
                                <div class="pixel pixel16 sizeL"></div>
                                <div class="pixel pixel17 sizeS"></div>
                                <div class="pixel pixel18 sizeL"></div>
                                <div class="pixel pixel19 sizeS"></div>
                                <div class="pixel pixel20 sizeL"></div>
                                <div class="pixel pixel21 sizeS"></div>
                                <div class="pixel pixel22 sizeS"></div>
                            </div>
                        </div>

                        <h2 class="project-title">Happy 25th Birthday <br />Game Boy</h2>
                        <p class="button-container">
                            <a class="button" href="https://ihatetomatoes.net/happy-25th-birthday-game-boy/" target="_blank">
                               <span class="bp bp-left"></span>
                               <span class="bp bp-mid"></span>
                               <span class="bp bp-right"></span>
                               <span class="bp-text">View Project</span>
                            </a>
                        </p>
                        <p class="project-subtitle">SuperScrollorama in action</p>
                    </div>
                     
                    <div class="project project03">
                        <div class="project-image">
                            <img src="img/img_svg-christmas.png" alt="SVG Christmas" />
                            <div class="project-pixels">
                                <div class="pixel pixel01 sizeS"></div>
                                <div class="pixel pixel02 sizeXL"></div>
                                <div class="pixel pixel03 sizeL"></div>
                                <div class="pixel pixel04 sizeXL"></div>
                                <div class="pixel pixel05 sizeL"></div>
                                <div class="pixel pixel06 sizeS"></div>
                                <div class="pixel pixel07 sizeL"></div>
                                <div class="pixel pixel08 sizeS"></div>
                                <div class="pixel pixel09 sizeL"></div>
                                <div class="pixel pixel10 sizeS"></div>
                                <div class="pixel pixel11 sizeS"></div>
                                <div class="pixel pixel12 sizeS"></div>
                                <div class="pixel pixel13 sizeXL"></div>
                                <div class="pixel pixel14 sizeL"></div>
                                <div class="pixel pixel15 sizeXL"></div>
                                <div class="pixel pixel16 sizeL"></div>
                                <div class="pixel pixel17 sizeS"></div>
                                <div class="pixel pixel18 sizeL"></div>
                                <div class="pixel pixel19 sizeS"></div>
                                <div class="pixel pixel20 sizeL"></div>
                                <div class="pixel pixel21 sizeS"></div>
                                <div class="pixel pixel22 sizeS"></div>
                            </div>
                        </div>
                        <h2 class="project-title">SVG Christmas</h2>
                        <p class="button-container">
                            <a class="button" href="https://ihatetomatoes.net/svg-christmas/" target="_blank">
                               <span class="bp bp-left"></span>
                               <span class="bp bp-mid"></span>
                               <span class="bp bp-right"></span>
                               <span class="bp-text">View Project</span>
                            </a>
                        </p>
                        <p class="project-subtitle">Greensock in action</p>
                    </div>    
            </div>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js">');></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSRulePlugin.min.js"></script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>



              
            
!

CSS

              
                /*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
    background: #2e2e30;
    color: #222;
    overflow-x: hidden;
    height: 100%;
    transition:  background-color 0.4s linear;
    
}
body.project01  {
    background-color:#4d5126;    
} 
body.project02  {
    background-color:#a8b183;    
} 
body.project03  {
    background-color:#988685;    
} 
h1, h2, h3, h4 {
    font-weight: 700;
}

.wrapper {
    width:90%;
    margin:0 auto;
}
/* =Project Slides*/
.projects {
    visibilty: hidden;
    opacity: 0;
}
.project {
     text-align: center;
     position: fixed;
     top: 50%;
     left: 0;
     bottom: 0;
     right: 0;
     transform: translateY(-50%); /* brings up from center of the screen */
 }

 .project-image,
 .project-image img, 
 .project-image:before, 
 .project-image:after {
     border-radius: 100%;
    
 }

.project-image:before 
{
    content: '';
    display:block;
    width:100%;
    height:100%;
    position: absolute;
    background-color: rgba(242,236,189,0.8);
    top: -5px;
    left: -5px;
    z-index: 2;
}

.project-image:after{
    content: '';
    display:block;
    width:100%;
    height:100%;
    position: absolute;
    background-color: rgba(121,140,29,0.3);
    bottom: -6px;
    right: -6px;
    z-index: 3;
}
 .project-image {
     position: relative;
     width: 224px;
     height: 224px;
     margin: 0 auto;
     z-index: 5;
 }

.project-image img{
    position:  relative;
    z-index: 4;
    display: block;
}

.project-title {
    text-transform: uppercase;
    color: #f2ecbd;
    font-size:30px;
    margin: 20px 0 0 0;
    
}

.project-subtitle {
    font-size: 16px;
    color: rgba(242,236,189,0.3);
        margin: 0;
        text-transform: lowercase;
        font-style: italic;

}
.project-pixels {
    position:absolute;
    top: 70%;
    left: 50%;
    z-index: 1;
    transform:translate(-50%, -100%);
}

.pixel {
    width:15px;
    height:15px;
    background-color: rgba(242,236,29,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    z-index: 3;
}

.pixel01 {left: 100px; top: -130px;}
.pixel02 {left: 126px; top: -124px;}
.pixel03 {left: 135px; top: -120px;}
.pixel04 {left: 114px; top: -114px;}
.pixel05 {left: 130px; top: -100px;}
.pixel06 {left: 110px; top: -95px;}
.pixel07 {left: 98px; top: -122px;}
.pixel08 {left: 149px; top: -124px;}
.pixel09 {left: 116px; top: -110px;}
.pixel10 {left: 99px; top: -78px;}
.pixel11 {left: 149px; top: -124px;}
.pixel12 {left: -100px; top: 20px;}
.pixel13 {left: -150px; top: 27px;}
.pixel14 {left: -160px; top: 25px;}
.pixel15 {left: -145px; top: -10px;}
.pixel16 {left: -150px; top: 10px;}
.pixel17 {left: -120px; top: 10px;}
.pixel18 {left: -140px; top: 10px;}
.pixel19 {left: -135px; top: 10px;}
.pixel20 {left: -140px; top: 0px;}
.pixel21 {left: -135px; top: -7px;}
.pixel22 {left: -120px; top: 35px;}

.sizeS {width:7px; height: 7px; background-color: rgba(242,236,189,0.3);}
.sizeM {width:12px; height: 12px; background-color: rgba(242,236,189,0.4);}
.sizeL {width:18px; height: 18px; background-color: rgba(242,236,189,0.6);}
.sizeXL {width:25px; height: 25px; background-color: rgba(242,236,189,0.5);}
.button-container {
    position:relative;
}
a.button {
    text-decoration: none;
    width: 150px;
   display: block;
    margin:0 auto;
    color:rgba(255,255,255,0.7);
    padding: 8px 0;
    position:absolute;
    top: 0;
    left:50%;
    transform:translateX(-50%);
}
.bp {
    width: 50px;
    height:100%;
    border: 2px rgba(255,255,255, 1) solid;
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.bp-mid {
    left: 50px;
    border-width: 1px 0;
    
}
.bp-left{
    border-width: 1px 0 1px 1px;
    border-top-left-radius:3px;
     border-bottom-left-radius:3px;
}
.bp-right{
    left:auto;
    right: 0;
    border-width: 1px 1px 1px 0;
    border-top-right-radius:3px;
     border-bottom-right-radius:3px;
    
}

/* add styles for other two projects and intro */
/* =GameBoy */
.project02 .project-title {
    color: #282c1b;
}
.project02 .project-subtitle {
    color: rgba(40,44,27,0.4);
}
.project02 .project-image:before {
    background-color: rgba(40,44,27,0.8);
}
.project02 .pixel {
    background-color: rgba(89,95,117,0.1);
}
.project02 .sizeS {background-color: rgba(89,95,117,0.1);}
.project02 .sizeL {background-color: rgba(89,95,117,0.3);}
.project02 .sizeXL {background-color: rgba(89, 95,117,0.6);}
 
/* =SVG Christmas */
.project03 .project-title {
    color: #473432;
}
.project03 .project-subtitle {
    color: rgba(71,52,50,0.3);
}
.project03 .project-image:before {
    background-color: rgba(254,182,0,0.7);
}
.project03 .project-image:after {
    background-color: rgba(234,93,71,0.6);
}
.project03 .pixel {
    background-color: rgba(71,52,50,0.1);
}
.project03 .sizeS {background-color: rgba(71,52,50,0.1);}
.project03 .sizeL {background-color: rgba(71,52,50,0.3);}
.project03 .sizeXL {background-color: rgba(71,52,50,0.6);}
 
/* =Intro */
.project00 .project-title {
    color: #fdfac6;
}
.project00 .project-subtitle {
    color: rgba(253,250,198,0.3);
}
.project00 .project-image:before {
    background-color: rgba(252,21,62,0.7);
}
.project00 .project-image:after {
    background-color: rgba(164,16,58,0.6);
}
.project00 .pixel {
    background-color: rgba(253,250,198,0.1);
}
.project00 .sizeS {background-color: rgba(253,250,198,0.1);}
.project00 .sizeL {background-color: rgba(253,250,198,0.3);}
.project00 .sizeXL {background-color: rgba(253,250,198,0.6);}







/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 740px) {

    .project-title {
  
    font-size:50px;
     
}

.project-subtitle {
    font-size: 20px;
    }


.project02 br {
    display:none;
    }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
              
            
!

JS

              
                (function($) {
	var $projects = $('.projects'),  //projects container targets every element on the page
 	$project = $('.project'), //individual projects
	projectImageBefore = CSSRulePlugin.getRule(".project-image:before"), //circle behind the image
	projectImageAfter = CSSRulePlugin.getRule(".project-image:after"),  //other circle
	tlProjects, tlProject;  //master timeline &

//Main Project Timeline
tlProjects = new TimelineMax(0)
tlProjects
	.set($projects,	{autoAlpha: 1}); //container was hidden in css to stop flickering, here it is reintroduced
	
//cheatsheet basic sytax
tlProject = new TimelineMax({repeat: -1, repeatDelay: 2}); //repeat infinitly/repeatDelay 2 seconds
// target every item on the page no


$project.each(function(index, element){ //by including the .each loop and (this) you reference the individual projects by themselve


	var projectClasses = $(this).attr('class').split(' '),
			projectClass = projectClasses[1];

		//finds all instances of all pixel inside of project
		$pixel = $(this).find('.pixel'),  //  $(this) references each project individually
		$pixels = $(this).find('.project-pixels'),
		$projectTitle = $(this).find('.project-title'),
		$projectSubtitle = $(this).find('.project-subtitle'),
		$projectImage = $(this).find('.project-image');
		//Project CTA  nested timeline 
	var tlProjectsCTA = new TimelineMax(),
			$projectLink = $(this).find('.button-container'),
			$projectLinkButton = $(this).find('.button'),
			$projectLinkSpan = $(this).find('.bp'),
			$projectLinkText = $(this).find('.bp-text');

		tlProjectsCTA
				.to($projectSubtitle, 0.3,  {autoAlpha: 0, yPercent: 100, ease:Back.easeOut})
				.staggerFrom($projectLinkSpan, 0.3, {autoAlpha:0, yPercent:-100, ease:Back.easeOut}, 0.4)
				.from($projectLinkText, 0.3, {autoAlpha: 0, x:'-100', ease:Power4.easeInOut}, '-=0.2');

		//create a project timeline
		tlProject
			.set([$projectTitle, $projectSubtitle, $pixel], {autoAlpha: 0}) 
			.fromTo($projectImage, 0.4, {autoAlpha: 0, xPercent:'-200'}, {autoAlpha: 1, xPercent:'-10', ease: Power4.easeInOut, onStart: updateClass, onStartParams: [projectClass]})

			//adds label to timeline
			.add('imageIn')
			.staggerFromTo($pixel, 0.3, {autoAlpha:0, x: '-=10'}, {autoAlpha: 1, x:'0', ease:Power4.easeInOut}, 0.02, '-=0.2') 
			.add('pixelsIn')
			.fromTo($projectTitle, 0.7, {autoAlpha: 0, xPercent: '-50'}, {autoAlpha: 1, xPercent: '-5', ease:Power4.easeInOut}, '-=0.4')

			.fromTo($projectSubtitle, 0.7, {autoAlpha: 0, xPercent: '-50'}, {autoAlpha: 1, xPercent: '-2', ease:Power4.easeInOut}, '-=0.5')
			.add('titleIn')
			.add(tlProjectsCTA,'+=2')//add button animation to project timeline
			.to($projectTitle, 4.3, {xPercent: '+=5', ease:Linear.easeNone}, 'title-=0.1')
			.to($projectSubtitle, 4.3, {xPercent: '+=5', ease:Linear.easeNone}, 'title-=0.2')
			.add('titleOut')
			.to($projectImage, 5, {xPercent: '0', ease:Linear.easeNone}, 'imageIn')
			.add('imageOut')  //timeline labe.
			.to($pixels, 4.1, {x: '-5', ease: Linear.easeNone}, 'pixelsIn')
			.to([$projectSubtitle,$projectTitle,$projectLink],	0.5, {autoAlpha: 0, xPercent:'+=10',ease:Power4.easeInOut}, 'titleOut')
			.to($projectImage,	0.4, {autoAlpha: 0, xPercent:'+=80',ease:Power4.easeInOut}, 'imageOut')
			;


	//Add project to the projects timeline

	tlProjects.add(tlProject);

		});

		//create a function to update the body class

		function updateClass(projectClass){
			$('body').attr('class', projectClass);

		}



})(jQuery);
















              
            
!
999px

Console