Can anyone help me tweak this little script? scroll into viewport kinda thing


I have a little script that makes it so that my css-animations start when the element scroll into view. However, I would (if possible) want to change the script so that the animation starts when you have scrolled … say 50% of the element, instead of right away.

Here is the script I’m using atm:

		function isElementInViewport(elem) {
		    var $elem = $(elem);

		    // Get the scroll position of the page.
		    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
		    var viewportTop = $(scrollElem).scrollTop();
		    var viewportBottom = viewportTop + $(window).height();

		    // Get the position of the element on the page.
		    var elemTop = Math.round( $elem.offset().top );
		    var elemBottom = elemTop + $elem.height();

		    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));

			function checkAnimation() {
		    $('.myelementClass').each(function() {
		        if (!$(this).hasClass('start') && isElementInViewport(this)) {

		// Capture scroll events

Thanks in advance.