uix-kit/src/components/skew-on-scroll/js/index.js

A free web kits for fast web design and development, compatible with Bootstrap v5.

/* 
 *************************************
 * <!-- Skew Based On Velocity of Scroll -->
 *************************************
 */
import {
    UixModuleInstance,
} from '@uixkit/core/_global/js';



export const SKEW_ON_SCROLL = ( ( module, $, window, document ) => {
	if ( window.SKEW_ON_SCROLL === null ) return false;
	
	
    module.SKEW_ON_SCROLL               = module.SKEW_ON_SCROLL || {};
    module.SKEW_ON_SCROLL.version       = '0.0.1';
    module.SKEW_ON_SCROLL.documentReady = function( $ ) {

		$( '.uix-skewscroll-container' ).each( function() {
		
			const $this    = $( this ),
				  $animObj = $this.find( 'p' ),
				  ease     = 0.15;
            
            let followY  = 0;

			
			TweenMax.set( $animObj, {
				transformOrigin: "center left"
			});

			TweenMax.ticker.addEventListener( 'tick', function() {
				followY += ( window.scrollY - followY) * ease;

				let dy = (window.scrollY - followY) / 20;
				
				dy = Math.min( Math.max(dy, -15), 15);
				TweenLite.set( $animObj, {
					skewY: dy
				});
			});
				
			
			
		});
		
		
    };

    module.components.documentReady.push( module.SKEW_ON_SCROLL.documentReady );
	

	return class SKEW_ON_SCROLL {
		constructor() {
			this.module = module;
		}
		
	};
	
})( UixModuleInstance, jQuery, window, document );