Hey Moritz!
Here is how to have the effect when you scroll. On pageload it won't really work. Put the css and javascript in "lay options" -> "custom css & html":
css:
.col.above{
transform: translateY(-90px);
opacity: 0;
}
.col.below{
transform: translateY(90px);
opacity: 0;
}
.col.transition-in{
transform: translateY(0);
opacity: 1;
}
.col{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}
javascript:
<script>
var $items;
var doScroll = function(){
$items.each(function(ix){
var rect = this.getBoundingClientRect();
//above viewport
if(rect.top+rect.height < 0){
jQuery(this).addClass("above").removeClass('below transition-in');
}
//below viewport
else if(rect.top > window.innerHeight){
jQuery(this).addClass("below").removeClass('above transition-in');
}
// in viewport
else{
jQuery(this).removeClass('above below').addClass("transition-in");
}
});
};
window.laytheme.on("newpageshown", function(){
setTimeout(function(){
$items = jQuery(".col");
},0);
});
jQuery(window).on('scroll', doScroll);
</script>
