< drag the image >

Ease360 is a 360 degree image spin sequencer, designed for a better feel. Utilizing HTML 5 canvas and javascript, Ease360 offers greater performance and control than other methods. Responsive layouts, retina images, event handling and smart preloading are all supported. Basic setup only requires 3 parameters, but you can do much more. Documentation is below and examples are detailed on the site.

Features include

• Physics based solution for 360 spin
• Responsive design options
• Modern HTML 5 canvas implentation
• Multiple callbacks and animation methods
• Mobile and tablet support
• Retina/HighDPI support

Download

On Github

Settings

Properties

Methods/Events

Callbacks

Below is the code used for the Ease360 Genesis G90 above.

    

  "use strict";

   var myEase360;  // define variable
    
   var G90lg = [];
   var G90Retinalg = [];
   var G90md = [];
   var G90Retinamd = [];
   var G90sm = [];
   var G90Retinasm = [];
   var G90xs = [];
   var G90Retinaxs = [];
   
   var pathG90lg = "./examples/images/G90_LondonGray_lg-360/";
   var pathG90md = "./examples/images/G90_LondonGray_md-360/";
   var pathG90sm = "./examples/images/G90_LondonGray_sm-360/";
   var pathG90xs = "./examples/images/G90_LondonGray_xs-360/";
           
    for(var i = 0; i < 36; i++){
    	
    	//lg
        G90lg.push(pathG90lg + "G90_LondonGray_lg_" + (i * 10) + ".jpg");
        G90Retinalg.push(pathG90lg + "G90_LondonGray_lg@2x_" + (i * 10) + ".jpg");
        
        //md
        G90md.push(pathG90md + "G90_LondonGray_md_" + (i * 10) + ".jpg");
        G90Retinamd.push(pathG90md + "G90_LondonGray_md@2x_" + (i * 10) + ".jpg");
        
        //sm
        G90sm.push(pathG90sm + "G90_LondonGray_sm_" + (i * 10) + ".jpg");
        G90Retinasm.push(pathG90sm + "G90_LondonGray_sm@2x_" + (i * 10) + ".jpg");
        
        //xs
        G90xs.push(pathG90xs + "G90_LondonGray_xs_" + (i * 10) + ".jpg");
        G90Retinaxs.push(pathG90xs + "G90_LondonGray_xs@2x_" + (i * 10) + ".jpg");
        
    }

	$(function() { 
		
		   myEase360 = $('#myEase360').ease360({
		        frames: G90lg,  //required
	            framesHighDPI: G90Retinalg,
	            frameDirection: -1,  //our sequence is reversed, so pass -1
	            width :  1442,   //required
	            height:  950,   //required
	            backgroundSize: "cover",  
	            preloadSmart : true,
	            flex : {"w" :  true},   // optional - default false - needed if element is % at breakpoint
	            responsive: [    {
                        breakpoint: 962,  //max width
                        frames: G90md, 
                        framesHighDPI: G90Retinamd, 
                        width : 962,  
                        height: 634,  
						flex : {"w" :  true}
                     },   
                    {
                        breakpoint: 660,  //max width
                        frames: G90sm, 
                        framesHighDPI: G90Retinasm, 
                        width : 668, 
                        height: 440,  
                        flex : {"w" :  true}
                     },   
                     {
                        breakpoint: 340,  //max width
                        frames: G90xs, 
                        framesHighDPI: G90Retinaxs, 
                        width : 342, 
                        height: 225,  
                        flex : {"w" :  true}
                     }
	            ],
                angleUpdate : function() {  myAngleUpdate(); },  
                progressUpdate: function() { myProgress(); },
                responsiveUpdate: function() {  myResponsiveUpdate(); }
	     });

			 myEase360.physics.damping = 0.94;
	});
	
   var $e;
   $e = $('.instructions');     
 
    
     function myAngleUpdate() {
         
        if (  myEase360 == null) return;
        if($e.hasClass('opacity1')) $e.removeClass('opacity1');

    }
    

    function myProgress(){
    
    	var m = (myEase360.preloadSmart) ? 2 : 1;  //adjust if we are using preloadSmart
            
        var v =  Math.floor(myEase360.progress * 100 ) * m;
    	$('.loading h4' ).html(  v + "%" );	
    	
    	if(v == 100){
    		 $('#myEase360 canvas').addClass('opacity1');
    		 $('.loading').addClass('opacity0').delay(2000).queue(function( ){           
		         $(this).css({"z-index" : 0});  //helper CSS found on examples.css
		         $('#ease360Layout h3.instructions').addClass('opacity1');
		         $('.loading h4' ).html( "loading" );	
		         $(this).dequeue();
        	 });
    	}

    }
    
     function myResponsiveUpdate(){
			
		//reset loader properties
		$('.loading').removeClass('opacity0');     
		$('#myEase360 canvas').removeClass('opacity1');    
		$(".loading").css({"z-index" :  1000});  //helper CSS found 
    }   
    
    
    function goto(angle){
        
       myEase360.angleTo(angle, 0.75);  // angle and time -- time is optional, defaults to 1s

    }