JSFiddle - React, Tailwind, and code Playground

by projeqht

HTML

<h1>scroll down to see animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat nibh, pretium a dolor at, ultricies condimentum risus. Suspendisse ipsum risus, vulputate eget nibh sed, volutpat volutpat diam. Fusce pellentesque ullamcorper ligula vitae vehicula. Vestibulum risus nibh, fringilla ut urna at, tempus mattis magna. In porta massa dolor, eu varius neque bibendum vitae. Maecenas lorem augue, dapibus vulputate elementum ut, tristique nec arcu. Nulla venenatis neque non nulla adipiscing rutrum. Fusce blandit ipsum non vehicula consequat.</p>

<p>Ut dictum, tellus sit amet pellentesque auctor, mi libero ultricies lacus, sed sagittis est tellus a lacus. In blandit hendrerit mi in congue. Donec quis dui mattis, facilisis justo a, ullamcorper ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus aliquam, diam vel mattis aliquam, enim urna rutrum leo, nec suscipit nisl magna placerat augue. Vivamus ut pretium nisi, quis sodales odio. Aenean feugiat dolor quis purus euismod lacinia. Integer faucibus odio in dui ullamcorper, non tristique augue tempor. Vestibulum ultricies nisl non varius fermentum. Aliquam pulvinar dignissim quam vitae posuere. Quisque at lorem gravida, facilisis ipsum sit amet, tempus risus. Donec et lectus eu velit feugiat condimentum. Duis rhoncus nibh sed varius blandit. Donec in ipsum ac tellus euismod pulvinar. Aenean eu mi non felis rhoncus ullamcorper n</p>ec orci.

<p>Cras tempus ligula et consectetur laoreet. Sed in tristique dolor. In neque mauris, sodales et molestie eu, blandit porttitor leo. Maecenas volutpat nec tortor in auctor. Aliquam rhoncus lorem eu condimentum interdum. Phasellus eu purus faucibus, accumsan quam quis, venenatis dui. Donec dui lacus, hendrerit id mauris sed, adipiscing suscipit nisi. Praesent scelerisque sagittis turpis, in aliquet nisl. Etiam id justo sed tortor consectetur viverra. Duis orci felis, auctor sed accumsan nec, scelerisque vitae lectus. Quisque...

CSS

#tier4_col1 {width:451px; height:445px;}

JavaScript

//http://stackoverflow.com/questions/17659049/html5-canvas-kineticjs-layer-order-switches-on-refresh/17678781#17678781
function isScrolledIntoView(elem){
     var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();
 
     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();
 
     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
       && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
 }
 //checking to see if the element is completely visible in the window
 

function checkIfVideoInView(){
	if ( isScrolledIntoView(tier4_col1) ) {
//if the element is completely visible in the window, do the animation		
/**********ANIMATE**********/
	
	new Kinetic.Tween({
        node: mac3rdpieceLayer,  
        x: 0,//ending position
		y: 15,
        duration: 2,
        easing: Kinetic.Easings.Linear
    }).play();
	
    new Kinetic.Tween({
        node: mac1stpieceLayer,  
        x: -85,//ending position
		y: 50,
        duration: 2,
        easing: Kinetic.Easings.Linear
    }).play();
	
/**********END ANIMATE**********/
    }//end if ( isScrolledIntoView(tier4_col1) )
}//end function checkIfVideoInView

window.onscroll = checkIfVideoInView;

window.onload = onTemplateReady;
function onTemplateReady(evt){
   checkIfVideoInView(tier4_col1);
 }
//checks to see if animation is already scrolled into view

//////////*****ANIMATION KINETIC CODE*****//////////
var myAnimateStage = new Kinetic.Stage({
    container: 'tier4_col1',
    width: 451,
    height: 455
});
//declare a stage for the animation. The width and height is set to the same size as in the CSS


var mac1stpieceLayer = new Kinetic.Layer();
var mac2ndpieceLayer = new Kinetic.Layer();
var mac3rdpieceLayer = new Kinetic.Layer();
//define new layers for each image


var mac1stpieceImageObj = new Image();
var mac2ndpieceImageObj = new Image();
var mac3rdpieceImageObj = new Image();
//define new image objects for each...