jQuery Plugin For Scrolling Animated Rendering Triggered In Viewport | RisingSun

RisingSun is a jQuery plugin that can start some kind of animation when entering a viewport.

animate on scroll jquery plugin, animate when scrolled into view jquery, one page scroll animation jquery, scrollmagic animate on scroll, scroll based animation

Object Detection in Viewport and Smooth Scrolling With Parallax Effects | Locomotive Scroll

How to make use of it:

1. Load the jQuery plugin risingsun after you have the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/lib/jquery.risingSun.js"></script>

2. Download the jQuery thinning plugin for additional mitigation effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Call the plugin on the element and set up the animation to play.


4. All default options and callback functions.

// animation speed
duration: 500,

// Animation will start after this value (ms)
timer: false, 

// starting position at Viewport(top 0.0- bottom 1.0)
startPosition: 0.5,

// starting position X(diff) for moving Animation
x: 0 

// starting position Y(diff) for moving Animation
y: 0, //

// starting scale for scaling Animation
scale: 1, //	is  [Default 1.0]

// easing options
ease: 'linear' ,

// wipe animation("TB" or "LR")
wipe: false , 

// start opacity
fadeStart: 0,

// end opacity
fadeEnd: 1, 

// Pop Up Animation ('true/false' or scaling factor)
popanime: false,

// replays animation
replay: true, 

// function called when animation is sarted
onWakeup: function(){}, 

// functioni called when animation is finished
onComplete: function(){},

// function called when replay
onReplay:  function(){} 

Viewport Triggered Scroll Animations, RisingSun jQuery PlugIn/Github

See Demo And Download

Official Website(kiyoshihonda): Click Here

This superior jQuery/javascript plugin is developed by kiyoshihonda. For extra advanced usage, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…