Create scroll animation by jQuery
The circus-scroll-tween is a simple and easy to use plug-in for creating the text or other content animation on the scroll. You may set different options like delay to start the animation, wheel distance, and type of easing from the available values.
Demo1
Developer page Download plug-in
How to set up circus-scroll-tween plug-in on your website?
Download the plug-in from the GitGub website by the above link. Place the circus-scroll-tween.min.js file above the body closing tag:
<script src=”js/circus-scroll/circus-scroll-tween.min.js”></script>
Settings at document level:
$('html').csInit({
wheelDelay: 250,
wheelDistance: 150,
wheelEase: 'easeInSine '
});
Set the animation settings for the elements as they are visible upon scrolling. See the demo below with code.
A demo of animation of text on scroll
In this example, four elements are used in the scroll animation. The first <h1> inside the <div> element will animate as you scroll down a little. As you scroll further down, the next three headings will appear with animation while the first disappears smoothly:
See online demo and code
The following script is used for first animation:
$('.scroll-ani-demo1').csTween({
begin: 0,
end: $('.slide1').height(),
from: {
letterSpacing: '1',
opacity: '1'
},
to: {
letterSpacing: '2vw',
opacity: '0'
},
easing: 'easeInOutBounce'
});
See all animation script on the demo page along with complete markup. Scroll to the bottom of the page to see the textarea containing the full code of the demo.
For learning more about the available options and easing values, visit the developer page.