<div class="container">	
    
<svg id="InteractiveSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 1024 1388" style="enable-background:new 0 0 1024 1388;" preserveAspectRatio="xMinYMin slice" aria-labelledby="timeline-title" aria-describedby="timeline-desc" role="group">
	 <desc id="timeline-desc">An Interactive Timeline</desc>
	 <g id="background">
 		<rect y="259.5" class="st0" width="1023.9" height="1128.5"/>
	 </g>
    <g id="ribbon">
      <polygon class="st1" points="720.4,57.5 455.3,57.5 440.7,57.5 297.5,57.5 314,88.4 297.5,119.2 440.7,119.2 455.3,119.2 
                                   720.4,119.2 703.9,88.4 		"/>
      <polygon class="st1" points="696.4,88.3 698.1,85.4 709.4,64.3 447.2,64.3 439.9,64.3 308.5,64.3 319.8,85.4 321.5,88.3 
                                   319.8,92.2 308.5,114.4 439.9,114.4 447.2,114.4 709.4,114.4 698.1,92.2 		"/>
      <path class="st2" d="M710.9,115.4h-404l12-23.6l1.4-3.4l-1.3-2.5l-12.1-22.5H711l-13.5,25l1.5,3.4L710.9,115.4z M310.1,113.4
                           h397.7l-10.6-20.8l-1.8-4.4l1.9-3.3l10.5-19.7H310.1l12.4,23l-1.8,4.3L310.1,113.4z"/>
    </g>
    <g id="timeline-title">
      <text transform="matrix(1 0 0 1 427.9552 43.422)" class="st3 st4 st5">A DAY</text>
      <text transform="matrix(1.14 0 0 1 365 105.8574)" class="st6 st7 st8 st9">IN THE LIFE</text>
      <text transform="matrix(1.14 0 0 1 469.0869 161.1821)" class="st3 st10 st8 st9">of a</text>
      <text transform="matrix(1 0 0 1 225.516 237.4282)" class="st1 st11 st12">Common House Cat</text>
  </g>
<g id="timeline" role="list" aria-label="the timeline, from morning to night">
	<g id="play" role="listitem">
			<a xlink:href="#play-group" role="img" aria-labelledby="play-time play-text play-description" tabindex="0" id="play-group">
				<text id="play-time" transform="matrix(1 0 0 1 533.1505 485.1465)" class="st13 st14 st15">3-5AM</text>
				<rect id="line" x="510.2" y="419.9" class="st13" width="17" height="153.6"/>
				<polyline id="arrow" class="st13" points="513.9,465 501.6,474.4 519.2,485.3"/>
				<circle class="st13 time-circle" cx="352.9" cy="419.9" r="130.5" />
				<g class="play-title">
					<text id="play-text" transform="matrix(1 0 0 1 288.1175 338.939)" class="st2 st16">PLAYTIME!</text>
				</g>
				<g id="play-activity">
					<rect x="252.3" y="477.3" class="st17" width="201.3" height="68"/>
					<text id="play-description" transform="matrix(1 0 0 1 260.9023 490.2235)">
						<tspan x="0" y="0" class="st18 st14 st19">MAKES A RUCKUS IN </tspan>
						<tspan x="21" y="21.6" class="st18 st14 st19">THE HOUSE ALL </tspan><tspan x="61.5" y="43.2" class="st18 st14 st19">NIGHT.</tspan>
						<tspan class="offscreen">A gray kitten tangled in a ball of yarn.</tspan>
					</text>
					<image style="overflow:visible;enable-background:new    ;" width="259" height="259" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/cat_tied.png" transform="matrix(0.3707 0 0 0.3707 304.9196 361.7916)">
					</image>
				</g>
			</a>	
	</g>
	<g id="wakeup" role="listitem">		
			<a xlink:href="#wakeup-group" role="img" aria-labelledby="wakeup-time wakeup-text wakeup-description" tabindex="0" id="wakeup-group">
				<text id="wakeup-time" transform="matrix(1 0 0 1 261.8302 598.4327)" class="st21">
					<tspan x="0" y="0" class="st20 st14 st15">30 MIN BEFORE</tspan>
					<tspan x="0" y="33.9" class="st20 st14 st15"> YOUR ALARM</tspan>
				</text>
				<rect x="510.2" y="573.5" class="st20" width="17" height="47.7"/>
				<polyline class="st20" points="524.9,605.3 537.2,596 519.6,585"/>
				<circle class="st20 time-circle" cx="713.6" cy="616.5" r="143.1"/>
				<g class="wakeup-title">
					<text id="wakeup-text" transform="matrix(1 0 0 1 649.1059 546.348)" class="st2 st16">WAKE UP!</text>
				</g>
				<g id="wakeup-activity">
					<rect x="614.5" y="670.3" class="st17" width="204.2" height="68"/>
					<text id="wakeup-description" transform="matrix(1 0 0 1 619.1191 683.2352)">
						<tspan x="0" y="0" class="st22 st14 st19">DECIDES YOU’VE HAD </tspan>
						<tspan x="24" y="21.6" class="st22 st14 st19">ENOUGH SLEEP. </tspan>
						<tspan class="offscreen">An orange kitten meowing loudly.</tspan>
					</text>
					<image style="overflow:visible;" width="256" height="256" id="wakeup-image" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/cat_sing.png" transform="matrix(0.375 0 0 0.375 664.1059 557)">
					</image>
				</g>
			</a>
	</g>
	<g id="sleep" role="listitem">
			<a xlink:href="#sleep-group" role="img" aria-labelledby="sleep-time sleep-text sleep-description" tabindex="0" id="sleep-group">
				<text id="sleep-time" transform="matrix(1 0 0 1 559.1717 800.7728)" class="st21">
					<tspan x="0" y="0" class="st25 st14 st15">WHEN YOU LEAVE TILL </tspan>
					<tspan x="0" y="33.9" class="st25 st14 st15">5 MIN BEFORE YOU’RE HOME</tspan>
				</text>
				<rect x="510.2" y="620.5" class="st25" width="17" height="326.3"/>
				<polyline class="st25" points="513.9,752 501.6,761.4 519.2,772.3"/>
				<circle class="st25 time-circle" cx="322.9" cy="802.3" r="130.5"/>
				<g class="sleep-title">
					<text id="sleep-text" transform="matrix(1 0 0 1 242 735.695)" class="st2 st16">SLEEPY TIME</text>
				</g>
				<g id="sleep-activity">
					<rect x="220.4" y="838.8" class="st17" width="205" height="94"/>
					<text id="sleep-description" transform="matrix(1 0 0 1 237.8921 851.7283)">
						<tspan x="0" y="0" class="st2 st14 st19">LITERALLY SLEEPS </tspan>
						<tspan x="7.5" y="21.6" class="st2 st14 st19">THE WHOLE TIME </tspan>
						<tspan x="19.5" y="43.2" class="st2 st14 st19">YOU’RE GONE.</tspan>
						<tspan class="offscreen">A gray kitten curled up in a tight little ball, sleeping.</tspan>
					</text>
					<image style="overflow:visible;" width="256" height="256" id="sleep-image" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/cat_sleep.png" transform="matrix(0.375 0 0 0.375 268.95 741)">
					</image>
				</g>
			</a>
	</g>
	<g id="feed" role="listitem">
			<a xlink:href="#feed-group" role="img" aria-labelledby="feed-time feed-text feed-description" tabindex="0" id="feed-group">
				<text id="feed-time" transform="matrix(1 0 0 1 411.8849 998.5654)" class="st1 st14 st15">6PM</text>
				<rect x="510.2" y="850.9" class="st1" width="17" height="283"/>
				<polyline class="st1" points="524.9,1001.3 537.2,992 519.6,981"/>
				<circle class="st1 time-circle" cx="721.6" cy="991.4" r="130.5"/>
				<g class="feed-title">
					<text id="feed-text" transform="matrix(1 0 0 1 680.6246 902.1143)" class="st21">
						<tspan x="0" y="0" class="st2 st16 st23">GUILT</tspan>
						<tspan x="-18.5" y="33.9" class="st2 st16 st23">FEEDING</tspan>
					</text>
				</g>
				<g id="feed-activity">
					<rect x="636" y="1048" class="st17" width="180" height="82.5"/>
					<text id="feed-description" transform="matrix(1 0 0 1 637.4875 1060.8926)">
						<tspan x="0" y="0" class="st24 st14 st19">POOR, POOR KITTY. </tspan>
						<tspan x="10" y="21.6" class="st24 st14 st19">HOME ALONE ALL </tspan>
						<tspan x="67.5" y="43.2" class="st24 st14 st19">DAY.</tspan>
						<tspan class="offscreen">A sad, orange kitten staring down at an empty food bowl.</tspan>
					</text>
					<image style="overflow:visible;" width="256" height="256" id="feed-image" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/cat_hungry.png" transform="matrix(0.375 0 0 0.375 668.6 943.5654)">
					</image>
				</g>
			</a>
	</g>
	<g id="cuddle" role="listitem">
			<a xlink:href="#cuddle-group" role="img" aria-labelledby="cuddle-time cuddle-text cuddle-description" tabindex="0" id="cuddle-group">
				<text id="cuddle-time" transform="matrix(1 0 0 1 563.3009 1196.9463)" class="st26 st14 st15">8PM</text>
				<rect x="510.2" y="1133.9" class="st26" width="17" height="110"/>
				<polyline class="st26" points="513.9,1181 501.6,1190.4 519.2,1201.3"/>
				<circle class="st26 time-circle" cx="317.6" cy="1181.4" r="130.5"/>
				<g class="cuddle-title">
					<text id="cuddle-text" transform="matrix(1 0 0 1 266.5206 1096.4385)" class="st21">
						<tspan x="0" y="0" class="st2 st16">CUDDLE</tspan>
						<tspan x="20.2" y="33.9" class="st2 st16">TIME</tspan>
					</text>
				</g>
				<g id="cuddle-activity">
					<rect x="222.6" y="1233" class="st17" width="190.7" height="77"/>
					<text id="cuddle-description" transform="matrix(1 0 0 1 240.9248 1245.8857)">
						<tspan x="0" y="0" class="st27 st14 st19">HELPS YOU WITH </tspan>
						<tspan x="-9" y="21.6" class="st27 st14 st19">YOUR WORK EMAIL</tspan>
						<tspan class="offscreen">A gray kitten stretched out on a laptop.</tspan>
					</text>
					<image style="overflow:visible;enable-background:new    ;" width="259" height="259" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/cat_laptop.png" transform="matrix(0.3707 0 0 0.3707 267.9986 1140.9463)">
					</image>
				</g>
			</a>
	</g>
</g>
</svg>
		</div>
@keyframes slideDown{
  0% {
    transform: translate(0px,0px) ;
  }
  100% {
    transform: translate(0px,75px) ;
  }
}


@keyframes slideUp{
  0% {
    transform: translate(0px,75px) ; 
  }
  100% {
    transform:  translate(0px,0px) ;
  }
} 


/*
stuff here
*/


body {
    font-family: cabin, Arial, sans-serif;
    background: #f9f9f9;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    overflow: scroll;
    overflow-x: hidden;
    padding: 0;
  margin: 0;
}


.st0{fill:#BBB8BF;}
  .st1{fill:#663399;}
  .st2{fill:#FFFFFF;}
  .st3{fill:#898989;stroke:#898989;stroke-miterlimit:10;}
  .st4{font-family:'Courier', Arial;}
  .st5{font-size:55px;}
  .st6{fill:#F7F6F5;stroke:#F7F6F5;stroke-width:0.25;stroke-miterlimit:10;}
  .st7{font-family: kelly-slab, Arial;}
  .st8{font-size:45px;}
  .st9{letter-spacing:2.6;}
  .st10{font-family: dancing-script, Arial;}
  .st11{font-family: lobster, Arial;}
  .st12{font-size:75.4598px;}
  .st13{fill:#353659;}
  .st14{font-family:cabin, Arial;}
  .st15{font-size:28.2251px;}
  .st16{font-family:cabin, Arial;}
  .st17{fill:none;}
  .st18{fill:#CEB995;}
  .st19{font-size:18px;}
  .st20{fill:#035E6D;}
  .st21{enable-background:new;}
  .st22{fill:#FCDAA9;}
  .st24{fill:#EAE9E8;}
  .st25{fill:#D1652F;}
  .st26{fill:#C5023C;}
  .st27{fill:#E5E4E3;}

ul{
  list-style: none;
}

[class$="title"] text {
    font-size: 28px;
  font-family: cabin-condensed, Arial, sans-serif;
} 

@supports(animation: slideDown) {
  [class$="title"] {
    animation: slideDown ease-in-out .5s forwards;
    animation-iteration-count: 1;
    transform-origin: center;
  }
}

[id$="activity"]{
  opacity: 0;
  visibility: hidden;
}

@supports(animation: slideUp) {
   a:hover [class$="title"] , a:focus [class$="title"] {
    animation: slideUp ease-in-out .5s forwards;
    animation-iteration-count: 1;
    transform-origin: center;
  }
}

a:hover [id$="activity"],  a:focus [id$="activity"]{
    opacity: 1;
  visibility: visible;
}

a:focus [class*="time-circle"], a:hover [class*="time-circle"]{
  stroke:black;
  stroke-width:5;
  paint-order:stroke; 
}

.offscreen{
    position: absolute!important;
    font-size: 0px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0 0,0 0,0 0,0 0);
}
$("#play-group").focus(function() {
  window.scrollTo(250,350);
});
$("#wakeup-group").focus(function(){
  window.scrollTo(250 , 600);
});
$("#sleep-group" ).focus(function(){
  window.scrollTo(250 , 850);
});
$("#feed-group" ).focus(function() {
  window.scrollTo(250 , 1100);
});
$("#cuddle-group" ).focus(function(){
  window.scrollTo(250 , 1350);
});

TweenLite.to('[class$="title"] text', 2, {scale:1.3}); 

$('a').bind("mouseenter focus", function(event) { 
  TweenLite.to($(this).find('[class$="title"] text'), 2, {scale:1});
}); 
$('a').bind("mouseleave focusout", function(event) { 
  TweenLite.to($(this).find('[class$="title"] text'), 2, {scale:1.3});
}); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.1.4.js
  2. //use.edgefonts.net/kelly-slab;dancing-script;lobster;cabin-condensed;cabin.js
  3. https://cdnjs.cloudflare.com/ajax/libs/tweene/0.5.11/tweene-all.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/prostyle/1.2.0/prostyle.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js