<div class="main-view-container">


    <section class="page-section__hero">
        <div class="hero-container">
            <div class="logo-container">

                <div class="chevron-container">
                    <?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 67.3 114.3" enable-background="new 0 0 67.3 114.3" xml:space="preserve">
<g>
	<path fill="#488CF0" d="M36.2,58.3c0.1,2.1,1.5,3.7,2.5,5.4c8.8,14.5,17.7,28.9,26.5,43.4c3.1,5.2,2.4,7-3.5,7.2
		c-8,0.3-16,0-23.9-0.4c-3.9-0.2-6.3-2.9-8.1-6C20.4,93,11.3,78.1,2.1,63.3c-1.8-2.9-3-6.1-1.4-9C6,45.1,11,35.7,17.8,27.5
		c3.3,3.2,4.4,7.7,7.1,11.3c0.9,1.6,2,3.1,3,4.6c1.1,1.7,2.2,3.4,3.2,5.2C32.5,52,35.9,54.3,36.2,58.3z"/>
	<path fill="#C55342" d="M36.2,58.3c-2.3-3-4.7-5.9-6.1-9.5c0.9-1.5,2.6-2,3.8-3.1c3.7-3.5,3.7-7.1-0.1-10.8c-1.5-1-2.8-2.4-4.2-3.5
		c-3.2-2.9-7.2-5-9.6-8.8c3.2-5.3,6.3-10.5,9.5-15.8c2.5-4.2,6.1-6.5,11-6.6c7.5-0.1,15-0.2,22.5-0.1c4.7,0.1,5.6,1.8,3.1,6
		c-7.7,12.8-15.5,25.6-23.3,38.3C39.9,48.8,37.5,53.3,36.2,58.3z"/>
	<path fill="#B54D3F" d="M19.9,22.6c4,2,6.9,5.4,10.3,8.2c0,4.3-1.6,7.5-6,8.9c-2.7-3.7-5.5-7.4-6.5-12.1
		C17,25.2,18.5,23.9,19.9,22.6z"/>
	<path fill="#BF5141" d="M34.2,33.7c2.5,1.6,4.6,3.4,3.9,6.8c-0.9,4.4-3.3,7.5-8,8.3c-1.3-1.4-2.4-2.9-3-4.8
		C29,40.2,31.8,37.1,34.2,33.7z"/>
	<path fill="#BA4F40" d="M34.2,33.7c-0.9,4.5-3.4,7.8-7.1,10.2c-1.3-1.2-2.2-2.6-2.8-4.3c2.8-2.4,4.5-5.6,6-8.9
		C31.6,31.7,32.9,32.7,34.2,33.7z"/>
</g>
</svg>


                    <div class="logo-text-container">

                        <div class="logo-text">


                            <!-- Hidden at first -->
                            <span class="title">GDG DevFest</span>


                            <span class="year">2015</span>
                        </div>

                    </div>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 67.1 114" enable-background="new 0 0 67.1 114" xml:space="preserve">
<g>
	<path fill="#469557" d="M31.2,55.4c-4-9-10-16.8-15-25.2c-4.7-8-9.8-15.8-14.7-23.7c-2.8-4.6-2-6.3,3.5-6.4c7.3-0.1,14.6,0,22,0.1
		c4.9,0,8.5,2.4,11,6.5c9,14.7,18,29.5,27.1,44.1c2.8,4.5,2.6,8.7-0.2,13.1c-4.9,7.7-9.7,15.5-14.5,23.2c-3.1-0.3-2.6-3.3-3.9-4.9
		c-0.6-1.4-1.2-2.7-2.1-4c-0.7-1.1-1.4-2.2-2-3.3c-0.9-1.7-2-3.3-3.1-4.8c-1.1-1.6-1.9-3.4-3.1-5.1C34.6,61.7,32,59,31.2,55.4z"/>
	<path fill="#F1C251" d="M31.2,55.4c2.6,2.7,4.3,6,6,9.3c-1.3,1.6-3.4,1.9-5,3.2c-4.3,3.6-4.3,5.3,0,8.9c1.2,0.9,2.3,2,3.6,2.9
		c1.4,0.9,2.6,2.2,4,3.3c1.4,1,2.8,1.9,4,3.1c1.4,1.6,3.8,2.1,4.4,4.6c-3.3,5.7-6.6,11.5-10.1,17.1c-2.5,4.1-6.1,6.3-11.2,6.1
		c-7.1-0.2-14.3-0.1-21.4-0.1c-5.5-0.1-6.3-1.5-3.5-6.2C10.5,93.4,19,79.2,27.8,65.1C29.8,62,30.1,58.6,31.2,55.4z"/>
	<path fill="#DAB14D" d="M48.1,90.7c-1.6-1.4-3.9-1.9-4.9-4c-1.2-3.8,1.3-4.6,4.1-5.2c2,1.3,1.2,4.3,3.2,5.5
		C49.7,88.3,48.9,89.5,48.1,90.7z"/>
	<path fill="#EBBE50" d="M32.1,77.7c-6.1-2.8-6.5-5.3-1.5-10c1.9-1.8,3.8-3.1,6.5-3c1,1.7,2,3.3,3.1,5
		C38.3,73.1,34.7,74.9,32.1,77.7z"/>
	<path fill="#E6BA4E" d="M32.1,77.7c1-4.4,5-5.7,8.1-8c1.3,1.5,2.5,3,3.1,5c-2.8,1.9-5,4.6-8.1,6C33.8,80,32.8,79,32.1,77.7z"/>
	<path fill="#E2B74D" d="M35.1,80.7c2.3-2.6,3.9-6,8.1-6c0.6,1,1.3,2,1.9,3c-1.2,2.8-4,4-6,6C37.8,82.7,36.5,81.7,35.1,80.7z"/>
	<path fill="#DFB44D" d="M39.1,83.7c0.4-3.6,3.9-4.1,6-6c1.2,1,1.8,2.3,2.1,3.9c-1.3,1.8-4.1,2.3-4.1,5.2
		C41.8,85.7,40.5,84.7,39.1,83.7z"/>
</g>
</svg>

                </div>

            </div>
        </div>

    </section>
</div>

[class^='page-section__'] {
  width: 100%; }

.page-section__hero {
  height: 550px; }

html,
body,
.main-container {
  width: 100%;
  height: 100%;
  font-family: Roboto, Arial, Helvetica;
}

.my-button {
  width: 80px;
  height: 40px;
  background-color: #eb621e; }

.hero-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center; }

.chevron-container {
  height: 400px;
  font-size: 5rem;
  display: flex;
  flex-direction: row;
  text-align: center; }
  .chevron-container svg {
    height: 400px;
    width: 145px; }
  .chevron-container .logo-text-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 100%;
    color: #4ccfe1; }
    .chevron-container .logo-text-container .logo-text p {
      line-height: 0; }
    .chevron-container .logo-text-container .logo-text .title {
      opacity: 0; }

.main-content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

var BASE_DURATION = 1,
    logoEntranceDuration = BASE_DURATION * 0.8;
    heroContainer = document.querySelector('.hero-container'),
    //imageGrid1 = document.querySelector('.grid-1');
    chevrons = document.querySelectorAll('.chevron-container svg'),
    logoYear = document.querySelector('.logo-text .year'),
    logoTitle = document.querySelector('.logo-text .title'),
    sampleImageSet = document.querySelectorAll('.image-grid img');


var timeline = new TimelineMax({
  delay: 1
});

timeline.from(
    chevrons,
    logoEntranceDuration,
    {
        scale: 0,
        opacity: 0,
        ease: Back.easeOut.config(1)
    }
);

timeline.fromTo(
    logoYear,
    logoEntranceDuration,
    {
        fontSize: '0px',
        opacity: 0,
        display: 'block'
    },
    {
        fontSize: '1em',
        opacity: 1,
        ease: Back.easeOut.config(1)
    },
    '-=' + logoEntranceDuration
);



/////////// Expand Text //////////

timeline.fromTo(
    logoTitle,
    BASE_DURATION,
    {
        fontSize: '0px',
        opacity: 0,
        display: 'none'
    },
    {
        display: 'block',
        opacity: 1,
        fontSize: '1em',
        ease: Back.easeOut.config(1.4)
    }
);