fade/slide in elements on scroll on mobile

[jensdan]

I found this useful post about fading in elements: fade in elements on scroll like on http://meireundmeire.com/category/selected-projects/

However it does not work on mobile – is there a way to make it work? Like on e.g. http://meireundmeire.com
Any input on this would be much appreciated.

THX!

As I only want it to slide in images I have changed the js script and added the .slideUp class to images in the gridder.

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(".slideUp");
    },0);
});
jQuery(window).on('scroll', doScroll);

</script>

CSS
.slideUp.above{
transform: translateY(-200px);
opacity: 0;
}

.slideUp.below{
transform: translateY(200px);
opacity: 0;
}

.slideUp.transition-in{
transform: translateY(0);
opacity: 1;
}

.slideUp{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}

[jensdan]

@jensdan I found out it worked as soon as I made a custom phone layout and added the slideUp class.

[mariusjopen]

Dear @jensdan
ah great!

Very happy about that!

Thank you for letting us know!

Best!

Marius