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

File Size: 13.1 KB
Views Total: 4148
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

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


  // 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){

  onProgress: function(el,p){

  onComplete: function(el){

  onReverseStart: function(el){

  onReverseComplete: function(el){


4. API methods.

// scrolls to a specific position
  scrollPos: 500, // pixels
  duration: 500,
  easing: 'easeOutQuad'

  scrollPos: 'end', // scrolls to end of document
  duration: 1000,
  easing: 'easeOutQuad'

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

// destroy the plugin

Change log:


  • js clean up.


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


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


  • 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.