A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion.
How to Create an Interactive Animated SVG Drum Kit
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery.
Animated Animals in CSS and SVG
Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
Transition Effect with CSS Masks
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!
Multi-Layer Page Reveal Effects
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
Animated Heat Distortion Effects with WebGL
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.
Organic SVG Shape Morph Ideas
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
Dynamic Shape Overlays with SVG
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
Timeline Bootstrap CSS3
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline">
<div class="col-md-2 col-sm-4 timeline">
<div class="timeline-content">
<div class="year">2011-2012</div>
<div class="post">Web Desginer</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, tenetur.
</p>
</div>
<div class="timeline-icon">
<i class="fa fa-globe"></i>
</div>
</div>
<div class="col-md-2 col-sm-4 timeline">
<div class="timeline-icon">
<i class="fa fa-rocket"></i>
</div>
<div class="timeline-content">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, tenetur.
</p>
<div class="post">Web Developer</div>
<div class="year">2012-2013</div>
</div>
</div>
<div class="col-md-2 col-sm-4 timeline">
<div class="timeline-content">
<div class="year">2013-2014</div>
<div class="post">Web Desginer</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, tenetur.
</p>
</div>
<div class="timeline-icon">
<i class="fa fa-briefcase"></i>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.main-timeline .timeline{
text-align: center;
padding: 0;
}
.main-timeline .timeline-icon{
padding: 45px 0 35px;
background: #58b25e;
border-radius: 0 0 50% 50%;
}
.main-timeline .timeline-icon i{
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background: #fff;
font-size: 45px;
}
.main-timeline .timeline-content{
padding: 0 10px 20px;
}
.main-timeline .year{
font-size: 16px;
font-weight: bold;
color: #58b25e;
}
.main-timeline .post{
font-size: 18px;
font-weight: bold;
color: #000;
}
.main-timeline .description{
font-size: 14px;
color: #555;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
padding: 35px 0 45px;
border-radius: 50% 50% 0 0;
}
.main-timeline .timeline:nth-child(2n) .timeline-content{
padding: 20px 10px 0;
}
.main-timeline .timeline:nth-child(2n) .timeline-icon{ background: #9f84c4; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{ background: #f35958; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{ background: #e67e49; }
.main-timeline .timeline:nth-child(2n) .year{ color: #9f84c4; }
.main-timeline .timeline:nth-child(3n) .year{ color: #f35958; }
.main-timeline .timeline:nth-child(4n) .year{ color: #e67e49; }
@media only screen and (max-width: 990px){
.main-timeline .timeline{
margin-bottom: 20px;
}