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>