jQuery Plugin For CSS & Easing Based Scroll Animations - circus-scroll-tween

circus-scroll-tween is a simple to use jQuery plugin which applies custom CSS styles and easing effects to any DOM elements depending on their scroll position.

How to use it:

1. Include jQuery JavaScript library and the jQuery circus-scroll-tween plugin's script at the bottom of your html page.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/circus-scroll-tween.min.js"></script>

2. Initialize the plugin and we're ready to go.

$('html').csInit({

  // global settings
  wheelDelay: 300,
  wheelDistance: 100,
  wheelEase: 'easeOutQuad'
  
});

3. The sample JavaScript to animate an element as it becomes visible and disappear on scroll.

$('.anim1').csTween({

  // begin / end scroll position
  begin: 0,
  end: 300,

  // custom CSS classes
  from: {
    letterSpacing: '0',
    opacity: '1'
  },
  to: {
      letterSpacing: '2vw',
      opacity: '0'
  },

  // easing effect
  easing: 'easeOutExpo',

  // callbacks
  onStart: function(el){
    //console.log('onStart');
  },

  onProgress: function(el,p){
    //console.log(p);
  },

  onComplete: function(el){
    //console.log('onComplete');
    $(el).hide();
  },

  onReverseStart: function(el){
    //console.log('onReverseStart');
    $(el).show();
  },

  onReverseComplete: function(el){
    //console.log('onReverseComplete');
  }

});

4. API methods.

// scrolls to a specific position
$().csGoTo({
  scrollPos: 500, // pixels
  duration: 500,
  easing: 'easeOutQuad'
});

$().csGoTo({
  scrollPos: 'end', // scrolls to end of document
  duration: 1000,
  easing: 'easeOutQuad'
});

// returns current scroll position
var scrollTop = $().csGetScrollTop();

// destroy the plugin
$().csDestroy();

Change log:

2016-12-09

• js clean up.

2016-09-09

• Mac scroll fix, BackgroundPositionY and BackgroundPositionX fixed (firefox)

2016-09-02

• Added a method '$().csGoTo();' that scrolls to defined position.
• Added '$().csGetScrollTop();' method.

2016-09-01

• Added a method '$().csDestroy();' to remove all scroll tweens and mouse wheel events.

---

This awesome jQuery plugin is developed by ZbigiMan. For more Advanced Usages, please check the demo page or visit the official website.