SCSS Animations - Library

by Lio Fleishman

HTML

<section id="animation">

  <div class="animation-container">
    <div id="object" class="slideUp"></div>
  </div>

</section>
<section id="actions">

  <div class="container">
    <h2>Entrances</h2>
    <a href="#" id="slideUp" class="button">Slide Up ↑</a>
    <a href="#" id="slideDown" class="button">Slide Down ↓</a>
    <a href="#" id="slideLeft" class="button">Slide Left ←</a>
    <a href="#" id="slideRight" class="button">Slide Right →</a>
    <a href="#" id="slideExpandUp" class="button">Slide Expand Up ↑</a>
    <a href="#" id="expandUp" class="button">Expand Up ↑</a>
    <a href="#" id="fadeIn" class="button">Fade In</a>
    <a href="#" id="expandOpen" class="button">Expand Open</a>
    <a href="#" id="bigEntrance" class="button">Big Entrance</a>
    <a href="#" id="hatch" class="button">Hatch</a>

    <h2>Misc</h2>
    <a href="#" id="bounce" class="button">Bounce</a>
    <a href="#" id="pulse" class="button">Pulse</a>
    <a href="#" id="float" class="button">Floating</a>
    <a href="#" id="tossing" class="button">Tossing</a>
    <a href="#" id="pullUp" class="button">Pull Up ↑</a>
    <a href="#" id="pullDown" class="button">Pull Down ↓</a>
    <a href="#" id="stretchLeft" class="button">Stretch Left ←</a>
    <a href="#" id="stretchRight" class="button">Stretch Right →</a>

  </div>

</section>

SCSS

#animation {
    position: relative;
}
section {
    overflow: hidden;
    width: 100%;
}
.animation-container {
    padding: 140px 0px 40px 0px;
    overflow: hidden;
}
#object {
    display: block;
    height: 180px;
    width: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    background-size: contain;
    background-color: #fe5652;
    border-radius: 24px;
    //visibility: hidden;
}
#actions {
    background-color: #FFFFFF;
    padding: 20px 0px 50px 0px;
}
.container {
    max-width: 740px;
    width: 90%;
    padding: 0px 5%;
    margin: auto;
}
h2 {
    font-weight: 200;
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 20px;
    margin-top: 30px;
    color: #444444;
		font-family:'Source Sans Pro', sans-serif;
}
a {
	font-family:'Source Sans Pro', sans-serif;
}
a:link {
    -webkit-tap-highlight-color: #FF5E99;
}
a.button {
    padding: 6px 16px;
    background-color: #61e69d;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 4px solid #5cd994;
    margin: 0px 15px 15px 0px;
    display: inline-block;
    border-radius: 5px;
    font-size: 16px;
}
a.button:link, a.button:visited {
    color: #FFFFFF;
}
	a.button:hover{
		background-color: #6bf5a9;
		-webkit-transition: background-color 0.2s ease;
		-moz-transition: background-color 0.2s ease;
		-ms-transition: background-color 0.2s ease;
		-o-transition: background-color 0.2s ease;
		transition: background-color 0.2s ease;			
	}
	
	a.activeBtn{
		background-color: #DDDDDD;
		border-bottom: 4px solid #D0D0D0;		
	}
	
	a.activeBtn:hover{
		background-color: #DDDDDD;
		border-bottom: 4px solid #D0D0D0;		
	}	

/*
==============================================
CSS3 ANIMATIONS
==============================================

Made by Lio Fleishman
==============================================
*/

// duration     Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
//
// delay        Specifies when the...

JavaScript

//demo of the animations

		var allBtns = document.getElementsByClassName('button');
		var objectEl = document.getElementById('object');
		
		var checkId = function(allBtns){
		
			var actualId = allBtns.target.id;
			objectEl.className = "";
			objectEl.className = ""+actualId+"";
			
		}
		
		for (var i = 0; i < allBtns.length; i++) {
			allBtns[i].addEventListener('click', checkId);
		}