Commit 5cd9e8d

<html lang="en">

<meta charset="UTF-8">

<title>Flex Panels 💪</title>

<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>

<style>

html {

box-sizing: border-box;

background:#ffc600;

font-family:'helvetica neue';

font-size: 20px;

font-weight: 200;

}

body {

margin: 0;

}

*, *:before, *:after {

box-sizing: inherit;

}

.panels {

display: flex;

min-height:100vh;

overflow: hidden;

}

.panel {

background:#6B0F9C;

box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);

color:white;

text-align: center;

align-items:center;

/* Safari transitionend event.propertyName === flex */

/* Chrome + FF transitionend event.propertyName === flex-grow */

transition:

font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),

flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),

background 0.2s;

font-size: 20px;

background-size:cover;

background-position:center;

display: flex;

flex-direction: column;

justify-content: center;

flex-grow: 1;

}

.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }

.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }

.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }

.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }

.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

.panel > * {

margin:0;

width: 100%;

transition: transform 0.5s 0.4s;

}

.panel p {

text-transform: uppercase;

font-family: 'Amatic SC', cursive;

text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);

font-size: 2em;

pointer-events: none;

}

.panel p:nth-child(2) {

font-size: 4em;

}

.panel p:nth-child(1) {

transform: translateY(-100vh);

}

.panel p:nth-child(3) {

transform: translateY(100vh);

}

.panel.open {

font-size: 40px;

flex-grow: 5;

}

.panel.open p:nth-child(1),

.panel.open p:nth-child(3) {

transform: translateY(0);

}

.cta {

color:white;

text-decoration: none;

}

</style>

<div class="panels">

<div class="panel panel1">

<p>Hey</p>

<p>Let's</p>

<p>Dance</p>

</div>

<div class="panel panel2">

<p>Give</p>

<p>Take</p>

<p>Receive</p>

</div>

<div class="panel panel3">

<p>Experience</p>

<p>It</p>

<p>Today</p>

</div>

<div class="panel panel4">

<p>Give</p>

<p>All</p>

<p>You can</p>

</div>

<div class="panel panel5">

<p>Life</p>

<p>In</p>

<p>Motion</p>

</div>

</div>

<script>

(function animatePanels () {

const panels = document.querySelectorAll('.panel');

panels.forEach((panel) => {

panel.addEventListener('click', (e) => {

e.target.classList.contains('open') ? e.target.classList.remove('open') : e.target.classList.add('open');

});

});

})();

</script>